Ajax几种请求方式(jQuery, XMLHttpRequest)，原生Ajax, Django

三种方式直接上前端代码：

1. jquery ajax

2. XMLHttpRequest GET方式

3. XMLHttpRequest POST方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax请求的几种方式</title>
</head>
<body>

<p><button id="jQueryAjax" onclick="ajax1()">Query Ajax</button></p>
<p><button id="XHRAjax1" onclick="ajax2()">XMLHttpRequest Ajax GET</button></p>
<p><button id="XHRAjax2" onclick="ajax3()">XMLHttp Request Ajax POST</button></p>

<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    //jquery ajax
    function ajax1() {
        $.ajax({
            url:"/ajax1",
            data:{"name":123},
            type:"GET",
            success:function (arg) {
                console.log(arg)
            }
        });
    }
    //原生XMLHttpRequest GET方式请求
    function ajax2(){
        //获取XMLHttpRequest对象
        var xlr = new XMLHttpRequest();
        //提前设置返回状态改变时如何接收数据
        xlr.onreadystatechange=function () {
            //状态4表示数据返回
            if(xlr.readyState==4){
                console.log(xlr.responseText);
            }
        };
        //设置发送方式和url
        xlr.open("GET","/ajax2?name=raylu");
        //发送
        xlr.send();
    }
    //原生XMLHttpRequest POST方式请求
    function ajax3(){
        //获取XMLHttpRequest对象
        var xlr = new XMLHttpRequest();
        //提前设置返回状态改变时如何接收数据
        xlr.onreadystatechange=function () {
            //状态4表示数据返回
            if(xlr.readyState==4){
                console.log(xlr.responseText);
            }
        };
        //设置发送方式和url
        xlr.open("POST","/ajax3/");
        //POST方式提交需要设置请求头
        xlr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8');
        //发送12
        xlr.send("name=raylu");
    }

</script>
</body>
</html>

后台View代码：

from django.shortcuts import render,HttpResponse

def view(request):
    return render(request,"index.html")
# Create your views here.
#通过jQuery请求
def ajax1(request):
    if request.method=="POST":
        print(request.POST)
        return HttpResponse("123")
    else:
        print(request.GET)
        return HttpResponse("456")

#通过原生的XMLHttpRequest进行GET请求
def ajax2(request):
    if request.method=="POST":
        print(request.POST)
        return HttpResponse("123")
    else:
        print(request.GET)
        return HttpResponse("456")

#通过原生的XMLHttpRequest进行POST请求
def ajax3(request):
    if request.method=="POST":
        print(request.POST)
        return HttpResponse("123")
    elif request.method=="GET":
        print(request.GET)
        return HttpResponse("456")

url路由：

from django.contrib import admin
from django.urls import path
from app1 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.view),
    path('ajax1/', views.ajax1),
    path('ajax2/', views.ajax2),
    path('ajax3/', views.ajax3),

]

settings:

STATIC_URL = '/static/'
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,"static")
]

注意使用POST提交时把CSRF注释掉，否则需要在前端加入{% csrf_token %}

Ajax几种请求方式(jQuery, XMLHttpRequest)，原生Ajax, Django

猜你喜欢