溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小生博客：http://xsboke.blog.51cto.com
-------謝謝您的參考，如有疑問，歡迎交流基于jQuery的AJAX實現(xiàn)(最底層的方法：$.ajax)
$.ajax(
url:
type: "POST" | "GET" -- 請求方式
)
一. 兩種快捷方式
$.get(url,[data],[callback],[type])
$.post(url,[data],[callback],[type])
url:URL(接口)
data:數(shù)據(jù)
callback:回調(diào)函數(shù)，當(dāng)你請求成功之后，需要執(zhí)行的函數(shù)
type:數(shù)據(jù)類型二. 演示$.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需要將靜態(tài)文件引入
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"});
// 回調(diào)函數(shù) function,當(dāng)server端拿到name數(shù)據(jù)并且返回內(nèi)容這個過程完成后
// 執(zhí)行function，就叫做回調(diào)函數(shù)
// function 中，第三個參數(shù)就是js的XMLHTTP對象
$.post("/jquery_get",{name:"dashan"},function(data,stateText,jqh){
// console.log(arguments); // 返回后臺返回的數(shù)據(jù)、返回狀態(tài)、返回一個對象
// 輸出返回的數(shù)據(jù)
console.log(data);
// 輸出返回的狀態(tài)
console.log(stateText);
// 輸出返回的對象，里面包括http狀態(tài)碼，返回內(nèi)容等等
// 這里的jqh名字是可變的，就是js中的ajax的實例對象
console.log(jqh);
alert(data)
});
// 第二種get傳輸參數(shù)的方式比第一種好在，
// 如果涉及到編碼，那么如果使用第一種，需要我們手動轉(zhuǎn)碼后寫入
// 如果是第二種，那么JQuery會自動轉(zhuǎn)碼
// $.get("/jquery_get?a=12"); //傳輸參數(shù)，通過編碼
// $.get("/jquery_get",{name:"dashan"}); //傳輸參數(shù)，通過鍵值對
}
</script>
</body>
</html>三. 其他API
$.getJson() = $.get(type:Json)
$.getJson()與$.get()是一樣的，只不過就是最后一個參數(shù)type必須是json數(shù)據(jù)了。一般同域操作用$.get()，$.getJson最主要是用來進(jìn)行jsonp跨域操作的
$.getscript("js文件",函數(shù)) - 使用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靜態(tài)文件
function add(s,y) {
return s+y
}五. $.ajax 的兩種使用方式(以鍵值對的方式表示每個參數(shù))
5.1 第一種形式
url在大括號里面
$.ajax({
url:"http://"
type："POST",
data:{
name:"dashan",
age:22
},
processData:false, # 此參數(shù)默認(rèn)為true,設(shè)置是否轉(zhuǎn)碼
contentType:
})5.2 第二種形式
url在大括號外面
$.ajax(url,{
})5.3 參數(shù)解釋：
data:當(dāng)前ajax請求要攜帶的數(shù)據(jù)，是一個json的object對象，ajax方法就會默認(rèn)地把它
編碼成某種格式(urlencoded:?a=1&a=2)發(fā)送給服務(wù)端，此外ajax默認(rèn)以get方式發(fā)送請求。
processData:聲明當(dāng)前的data數(shù)據(jù)是否進(jìn)行轉(zhuǎn)碼或預(yù)處理，默認(rèn)為true，即預(yù)處理；
如果為false，那么data:{a:1,b:2}會調(diào)用json對象的tostring()方法，即
{a:1,b:2}.toString(),最后得到一個{object,Object}形式的結(jié)果，該屬性的
意義在于，當(dāng)data是一個dom結(jié)構(gòu)或者xml數(shù)據(jù)時，我們希望數(shù)據(jù)不要進(jìn)行處理，
直接發(fā)過去，就可以將其設(shè)置為true
contentType：用于設(shè)置請求頭的內(nèi)容類型
默認(rèn)值："application/x-www-form-urlencoded" ，發(fā)送信息至服務(wù)器時內(nèi)容編碼類型。
用來指明當(dāng)前請求的數(shù)據(jù)編碼格式; urlencoded:?a=1&b=2;
如果想以其他方式提交數(shù)據(jù)，比如：contentType:"application/json",即向服務(wù)器發(fā)送
一個json字符串
traditional：一般是我們的data數(shù)據(jù)有數(shù)組時會用到,默認(rèn)為false會對進(jìn)行深層次迭代
$.ajax({
url:"http://"
type："POST",
data:{
name:"dashan",
age:[3,4] # 如果不使用traditional，服務(wù)器接收到的數(shù)據(jù)為{'name':'dashan','age[]'，['3','4']}
},
traditional:true # 使用了traditional，則接收到的數(shù)據(jù)為{'name':['dashan'],'age':['3','4']}
})
dataType: 預(yù)期服務(wù)器返回的數(shù)據(jù)類型，服務(wù)器端返回的數(shù)據(jù)會根據(jù)這個值解析后，傳遞給回調(diào)函數(shù)。
就是告訴我服務(wù)端我要接收什么樣的數(shù)據(jù)類型
值："json"和"xml"
示例：
view函數(shù)：
import json
def jquer_get(req):
dic={'name':"dashan"}
return HttpResponse(json.dumps(dic)) # 只要數(shù)據(jù)符合json字符串規(guī)則，這里就不需要使用dumps進(jìn)行轉(zhuǎn)換
模板文件：
$.ajax({
url:"/jquer_get"
type："POST",
data:{
name:"dashan",
age:[3,4]
},
traditional:true,
dataType："json",
success:function (data) { # success是回調(diào)函數(shù)
console.log(data) # 返回一個json對象： Object:{name:"dashan"}
}
})
.parse()和.stringify()
parse用于從一個字符串中解析出json對象，如：
var str = '{"name":"dashan","age":"22"}'
結(jié)果：
JSON.parse(str)
Object
age:"23"
name:"dashan"
注意：單引號在{}外面，每個屬性名必須使用雙引號，否則會拋出異常
stringify()用于從一個對象解析出字符串，如：
var a = {a:1,b:2}
結(jié)果：
JSON.stringify(a)
"{"a":"1","b":"2"}"
success：當(dāng)ajax成功響應(yīng)后執(zhí)行的函數(shù)
error：當(dāng)ajax響應(yīng)失敗后執(zhí)行的函數(shù)
complete：不管ajax有沒有成功響應(yīng)都會執(zhí)行的函數(shù)
statusCode{ # 根據(jù)不同的ajax響應(yīng)狀態(tài)碼進(jìn)行操作
'403':function(){
},
'404':function(){
}
}免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼