Django 基於 jquery 的 ajax

時間 2020-06-17

原文原文鏈接

<1> $.ajax的兩種寫法：html

$.ajax("url",{})
      $.ajax({})

<2> $.ajax的基本使用jquery

$.ajax({
    url:"//",
    data:{a:1,b:2},
    type:"GET",
    success:function(){}
})

$.get() 方法

建立一個 static 文件夾，用來存儲 jquery.min.jsajax

配置 settings.py，在最後添加django

STATICFILES_DIRS=(
    os.path.join(BASE_DIR, "static"),
)

添加一個 ajax_jquery.htmljson

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func1()">ajax提交</button>

<script src="/static/jquery.min.js"></script>
<script>
    function func1() {
        Test()
    }

    function Test() {
        $.get("/jquery_get/",{name:"klvchen"});
    }
</script>
</body>
</html>

修改 views.pyapp

def jquery_test(req):

    return render(req, "ajax_jquery.html")

def jquery_get(req):
    print(req.GET)
    return HttpResponse("ok")

添加 urls.py函數

path('jquery_test/', views.jquery_test),
    path('jquery_get/', views.jquery_get),

使用自定義 js

修改 ajax_jquery.htmlpost

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="/static/jquery.min.js"></script>
<script>
    $.getScript("/static/test.js",function () {
        alert(add(1,2))
    })

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

在 static 文件夾下添加 test.js 文件url

function add(s,y) {
    return s+y
}

$.ajax POST 方法

修改 ajax_jquery.htmlspa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="/static/jquery.min.js"></script>
<script>

    $.ajax({
        url:"/jquery_get/",
        type:"POST",
        data:{a:1,b:2},
    })


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

修改 urls.py

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

urlpatterns = [
    path('jquery_test/', views.jquery_test),
    path('jquery_get/', views.jquery_get),
]

traditional 選項爲false會對數據進行深層次迭代；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="/static/jquery.min.js"></script>
<script>

    $.ajax({
        url:"/jquery_get/",
        type:"POST",
        data:{a:1,b:[2,3]},
        traditional: true,
    })


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

有 traditional 選項沒有 traditional 選項

ajax 傳遞 json 格式

修改 ajax_jquery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="/static/jquery.min.js"></script>
<script>
    $.post("/jquery_get/",function (data) {
        console.log(data)
        console.log(typeof data)
        data=JSON.parse(data)
        console.log(data["name"])
    })


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

修改 views.py

def jquery_test(req):

    return render(req, "ajax_jquery.html")

import json
def jquery_get(req):
    print(req.POST)
    dic={"name":"lucy"}
    return HttpResponse(json.dumps(dic))

ajax 回調函數

修改 ajax_jquery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="/static/jquery.min.js"></script>
<script>
    $.ajax({
        url:"/jquery_get/",
        type:"POST",
        data:{a:1,b:[3,4]},
        traditional:true,
        dataType:"json",
        success: function (data) {
            console.log(data)
        },
        error: function (data) {
            console.log(arguments)
            alert(data)
        }

    })

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

修改 views.py

def jquery_test(req):

    return render(req, "ajax_jquery.html")

import json
def jquery_get(req):
    print(req.POST)
    dic={"name":"lucy"}
    return HttpResponse(json.dumps(dic))