当前位置： 移动技术网 > IT编程>脚本编程>Python > Django 基于 jquery 的 ajax

Django 基于 jquery 的 ajax

2019年06月07日  | 移动技术网IT编程  | 我要评论

十月331,城步天气预报,紫府仙缘txt

<1> $.ajax的两种写法：

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

<2> $.ajax的基本使用

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

$.get() 方法

创建一个 static 文件夹，用来存储 jquery.min.js

配置 settings.py， 在最后添加

staticfiles_dirs=(
    os.path.join(base_dir, "static"),
)

添加一个 ajax_jquery.html

<!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.py

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.html

<!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 文件

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

$.ajax post 方法

修改 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: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))

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网