1. 程式人生 > >Ajax幾種請求方式(jQuery, XMLHttpRequest),原生Ajax, Django

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 %}