小生博客：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(){
}
}