小生博客：http://xsboke.blog.51cto.com
-------谢谢您的参考，如有疑问，欢迎交流基于jQuery的AJAX实现(最底层的方法：$.ajax)
$.ajax(
url:
type: "POST" | "GET" -- 请求方式
)
一. 两种快捷方式
$.get(url,[data],[callback],[type])
$.post(url,[data],[callback],[type])
url:URL(接口)
data:数据
callback:回调函数，当你请求成功之后，需要执行的函数
type:数据类型二. 演示$.get 和 $.post
2.1 url.py 文件
from django.contrib import admin
from django.conf.urls import url
from django.urls import path
from jquery_ajax import views
urlpatterns = [
path('admin/', admin.site.urls),
url(r'jquery_test',views.jquery_test),
url(r'jquery_get',views.jquery_get),
]2.2 views.py文件
def jquery_test(req):
return render(req,"ajax_jquery.html")
def jquery_get(req):
print(req.GET)
return HttpResponse("OK")2.3 因为需要使用jquery所以settings.py需要将静态文件引入
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,"static"),
)2.4 ajax_jquery.html模板文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="fun1();">ajax提交</button>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
function fun1() {
test()
}
function test() {
// $.post("/jquery_get")
// $.post("/jquery_get",{name:"dashan"});
// 回调函数 function,当server端拿到name数据并且返回内容这个过程完成后
// 执行function，就叫做回调函数
// function 中，第三个参数就是js的XMLHTTP对象
$.post("/jquery_get",{name:"dashan"},function(data,stateText,jqh){
// console.log(arguments); // 返回后台返回的数据、返回状态、返回一个对象
// 输出返回的数据
console.log(data);
// 输出返回的状态
console.log(stateText);
// 输出返回的对象，里面包括http状态码，返回内容等等
// 这里的jqh名字是可变的，就是js中的ajax的实例对象
console.log(jqh);
alert(data)
});
// 第二种get传输参数的方式比第一种好在，
// 如果涉及到编码，那么如果使用第一种，需要我们手动转码后写入
// 如果是第二种，那么JQuery会自动转码
// $.get("/jquery_get?a=12"); //传输参数，通过编码
// $.get("/jquery_get",{name:"dashan"}); //传输参数，通过键值对
}
</script>
</body>
</html>三. 其他API
$.getJson() = $.get(type:Json)
$.getJson()与$.get()是一样的，只不过就是最后一个参数type必须是json数据了。一般同域操作用$.get()，$.getJson最主要是用来进行jsonp跨域操作的
$.getscript("js文件",函数) - 使用AJAX请求，获取和运行JavaScript四. $.getscript示例
4.1 ajax_jquery.html模板文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="fun1();">ajax提交</button>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
function fun1() {
test()
}
function test() {
$.getscript("/static/test.js",function () {
alert(add(2,5)) //返回7
}
)
}
</script>
</body>
</html>4.2 test.js静态文件
function add(s,y) {
return s+y
}五. $.ajax 的两种使用方式(以键值对的方式表示每个参数)
5.1 第一种形式
url在大括号里面
$.ajax({
url:"//"
type："POST",
data:{
name:"dashan",
age:22
},
processData:false, # 此参数默认为true,设置是否转码
contentType:
})5.2 第二种形式
url在大括号外面
$.ajax(url,{
})5.3 参数解释：
data:当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它
编码成某种格式(urlencoded:?a=1&a=2)发送给服务端，此外ajax默认以get方式发送请求。
processData:声明当前的data数据是否进行转码或预处理，默认为true，即预处理；
如果为false，那么data:{a:1,b:2}会调用json对象的tostring()方法，即
{a:1,b:2}.toString(),最后得到一个{object,Object}形式的结果，该属性的
意义在于，当data是一个dom结构或者xml数据时，我们希望数据不要进行处理，
直接发过去，就可以将其设置为true
contentType：用于设置请求头的内容类型
默认值："application/x-www-form-urlencoded" ，发送信息至服务器时内容编码类型。
用来指明当前请求的数据编码格式; urlencoded:?a=1&b=2;
如果想以其他方式提交数据，比如：contentType:"application/json",即向服务器发送
一个json字符串
traditional：一般是我们的data数据有数组时会用到,默认为false会对进行深层次迭代
$.ajax({
url:"//"
type："POST",
data:{
name:"dashan",
age:[3,4] # 如果不使用traditional，服务器接收到的数据为{'name':'dashan','age[]'，['3','4']}
},
traditional:true # 使用了traditional，则接收到的数据为{'name':['dashan'],'age':['3','4']}
})
dataType: 预期服务器返回的数据类型，服务器端返回的数据会根据这个值解析后，传递给回调函数。
就是告诉我服务端我要接收什么样的数据类型
值："json"和"xml"
示例：
view函数：
import json
def jquer_get(req):
dic={'name':"dashan"}
return HttpResponse(json.dumps(dic)) # 只要数据符合json字符串规则，这里就不需要使用dumps进行转换
模板文件：
$.ajax({
url:"/jquer_get"
type："POST",
data:{
name:"dashan",
age:[3,4]
},
traditional:true,
dataType："json",
success:function (data) { # success是回调函数
console.log(data) # 返回一个json对象： Object:{name:"dashan"}
}
})
.parse()和.stringify()
parse用于从一个字符串中解析出json对象，如：
var str = '{"name":"dashan","age":"22"}'
结果：
JSON.parse(str)
Object
age:"23"
name:"dashan"
注意：单引号在{}外面，每个属性名必须使用双引号，否则会抛出异常
stringify()用于从一个对象解析出字符串，如：
var a = {a:1,b:2}
结果：
JSON.stringify(a)
"{"a":"1","b":"2"}"
success：当ajax成功响应后执行的函数
error：当ajax响应失败后执行的函数
complete：不管ajax有没有成功响应都会执行的函数
statusCode{ # 根据不同的ajax响应状态码进行操作
'403':function(){
},
'404':function(){
}
}免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
