Ajax的特點
- 異步提交：Ajax采用異步通信方式，能夠在頁面無需重新加載的情況下向服務器發送請求并接收響應數據，提升了用戶體驗。
- 無需插件：Ajax是基于標準瀏覽器的Javascript和XMLHttpRequest對象實現的，無需安裝插件或控件。
- 局部刷新：Ajax能夠實現局部刷新，只更新需要更新的部分，而不是整個頁面。
- 支持多種格式數據交互：Ajax不僅支持XML格式數據交互，還支持JSON、HTML、文本等多種格式的數據交互。
- 提高性能：因為Ajax可以在頁面保留數據，只更新需要更新的部分，減少了不必要的請求和響應，從而提高了網站性能。
- 提供多種編程語言支持：Ajax不僅支持Javascript編程，還支持其他編程語言，如PHP、ASP、Python等。
- 可以實現動態效果：Ajax可以用來實現動態效果，如自動補全、搜索框提示、無限滾動等。
Ajax案列
?views
from django.shortcuts import render, HttpResponsedef a_ajax(request):if request.method == 'POST':"""接受ajax提交的數據"""print(request.POST) # <QueryDict: {'inp1': ['1'], 'inp2': ['1']}># d1 = request.POST.get('inp1')# d2 = request.POST.get('inp2')# d3 = int(d1)+int(d2)# print(d3)l_dict = {'username': 'kk', 'password': 123}import jsonreturn HttpResponse(json.dumps(l_dict))return render(request, 'a_ajax.html')
HTML文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
{# <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>#}
</head>
<body>
<input type="text" id="inp1">+
<input type="text" id="inp2">=
<input type="text" id="inp3">
<button class="btn">提交</button>
</body>
</html><script>$('.btn').click(function() {var inp1 = $("#inp1").val();var inp2 = $("#inp2").val();//獲取到的數據返回到后端，使用python來計算$.ajax({url: '',//不寫默認朝當前地址傳遞type: 'post',//默認為getdata: {inp1: inp1, inp2: inp2},//回調函數用來壓接受后端返回的數據success: function (res) {console.log(res)//獲取值{#$("#inp3").val(res)#}//進行返序列化//后端返回的數據別忘記返序列化，后端記得序列化res = JSON.parse(res)console.log(res.username)console.log(res.password)}})})
</script>前后端傳輸數據的編碼格式
????????我們只研究post請求方式，get沒有請求方式，他的格式為
get：index（地址）？a=1&b=2
參數直接在url后面
post的請求方式
form表單
Ajax
api工具
1. form表單的post請求
默認的編碼格式：urlencode
數據的傳輸方式：title=dasdas&price=2312&date=&publish=2&authors=3，k,v形式的鍵值對傳輸
后端如何接收：把前端提交的數據封裝到request.POST中，而傳輸的文件則在request.FILES中
提交form-data文件數據：enctype：form-data
傳輸方式：title=dasdas&price=2312&date=&publish=2&authors=3
2. Ajax提交POST請求
默認Ajax提交數據 還是在request,POST中接受，默認編碼格式urlencode
需要修改的contype：json
3. Ajax提交json的格式數據
json格式的數據提交后
設置提交json格式：
$.ajax({url: '',//不寫默認朝當前地址傳遞type: 'post',//默認為getdata: JSON.stringify({inp1:inp1, inp2:inp2}),contentType: 'application/json',//回調函數用來壓接受后端返回的數據success: function (res) {console.log(res)4. Ajax提交文件數據
<script>$(".btn").click(function (ev) {console.log(123);// 要獲取到文件數據，{#console.log($("#myfile")[0].files[0]) // C:\fakepath\123.png#}// 提交文件數據需要借助于formdata對象var myFormDataObj = new FormData;var username = $("#username").val();var myfile = $("#myfile")[0].files[0];myFormDataObj.append('username', username);myFormDataObj.append('myfile',myfile);$.ajax({url: '',type: 'post',{#data: JSON.stringify({a: 1, b: 2}), // 序列化的 "{"a":1, "b":2}"#}data: myFormDataObj, // 序列化的 "{"a":1, "b":2}"{#contentType: 'application/json', // json格式的#}contentType:false, // 告訴瀏覽器不要給我的編碼格式做任何的處理processData: false, //success: function (res) {}})})
</script>
