Django 基于 jquery 的 ajax
程序员文章站
2022-06-29 07:55:28
$.ajax的两种写法： $.ajax("url",{}) $.ajax({}) $.ajax的基本使用 $.ajax({ url:"//", data:{a:1,b:2}, type:"GET", success:function(){} }) $.get() 方法 创建一个 static 文件夹 ......
<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))
上一篇： CentOS7搭建KMS服务器
下一篇： 存在重复元素