Ajax
異步提交
局部刷新
?
發送方式
1. 瀏覽器輸入url，按enter?????? get
2.a標簽href屬性?????????????????????? get
3.form表單??????????????????????????????? get/post
4. ajax?????????????????????????????????????? get/post
?
ajax 不是編程語言，是先有標準的新方法。
只學習jQuery封裝之后的版本（不學原生）
$(".del").on("click", function () {// 向后端發送刪除的請求$.ajax({// 1.指定發送后端url: "/delete/", //不寫，就是當前地址//請求方式type: "post", //不指定，默認get，都是小寫// 數據data: {"id":delId},// 回調函數：返回結果時自動觸發，args是后端返回的結果success:function (arg) {swal(arg, "你可以跑路了！", "success");$trEle.remove();});});})后端
def index(request):if request.method == 'POST':back_dic = {'msg':'hahaha'}return HttpResponse(json.dumps(back_dic)) # 要自己手動反序列化return JsonResponse(back_dic) # 前端能自動反序列化return render(request,'index.html')ajax補充：
dataType:'JSON'如果使用HttpResponse ,會自動轉換json格式?
前后端交互的數據編碼格式
form表單默認是urlencoded編碼格式傳輸數據
urlencoded數據格式：username=jason&password=123django后端針對該格式的數據 會自動解析并幫你打包到request.POST中formdata數據格式：django后端針對符合urlencoded編碼格式數據(普通鍵值對)還是統一解析到request.POST中而針對formdata文件數據就會自動解析放到request.FILES中application/jsondjango后端針對json格式數據 并不會做任何的處理而是直接放在request.body中?
ajax發送數據
?
默認urlencoded編碼格式
前后端數據交互 編碼格式與數據格式一定要一致
聲明什么編碼格式，就用傳什么格式
ajax發送json格式
$('#d2').on('click',function () {$.ajax({url:'',type:'post',contentType:'application/json', // 修改content-Type參數data:JSON.stringify({'username':'jason','password':123}), // 將數據序列化成json格式字符串success:function (data) {alert(data)}})})補充：request.is_ajax();判斷是不是ajax請求
?
前端不會處理json格式的數據，而是直接塞進request.body中。我們自己處理json格式數據，拿到的是二進制json
def ab_ct(request):if request.method == 'POST':# 自己處理json格式數據json_bytes = request.body# 擴展 json.loads能夠自動解碼并序列化json_dict = json.loads(json_bytes)print(json_dict,type(json_dict))print(request.POST)print(request.FILES)return render(request,'ab_ct.html')ajax發送json格式數據注意點
1.contentType:'application/json',
2. data 數據是真正的json數據
3.django后端不會處理json數據，需要手動request.body獲取和處理
?
ajax發送文件
ajax發送文件(******)內置對象FormData即發普通鍵值對也發文件// ajax發送文件數據 需要借助于內置對象$('#d3').click(function () {// 1 需要先生成一個內置對象var myFormData = new FormData();// 2 傳普通鍵值對 當普通鍵值對較多的時候 我們可以利用for循環來添加myFormData.append('username','jason');myFormData.append('password',123);// 3 傳文件myFormData.append('myfile',$('#i1')[0].files[0]); // 獲取input框內部用戶上傳的文件對象// 發送ajax請求$.ajax({url:'',type:'post',data:myFormData,// 發送formdata對象需要指定兩個關鍵性的參數processData:false, // 讓瀏覽器不要對你的數據進行任何的操作contentType:false, // 不要使用任何編碼格式 對象formdata自帶編碼格式并且django能夠識別該對象success:function (data) {alert(data)}})})?
SweetAlert
< script >
function Delete(obj) {var article_id = $(obj).attr("article_id"); {#console.log(article_id);#}swal({title: '確定刪除嗎？',text: '你將無法恢復它！',type: 'warning',showCancelButton: true,confirmButtonColor: '#d33',cancelButtonColor: '#3085d6',confirmButtonText: '確定！',}).then(function(value) {if (value.value) {$.ajax({url: "/JiaBlog/article/" + article_id + "/editor/delete/",type: 'POST',data: {csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),article_id: article_id,},success: function(result) {var status = result.result;if (status == 'success') {swal('刪除成功！', '你的文件已經被刪除。', 'success');} else {swal('出錯啦。。。', "error"); //后端刪除失敗}setTimeout(function() {window.location.reload()},1000);}})} else {swal('已取消！', '', 'error')}})
}< /script>/
?
參考：
https://www.cnblogs.com/guyouyin123/p/12173020.html
https://blog.csdn.net/ssjdoudou/article/details/90727543
?
?
?
)
