Python學習第152天（Django之Ajax）
阿新 • • 發佈：2020-08-13
一 什麼是Ajax
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“非同步Javascript和XML”。即使用Javascript語言與伺服器進行非同步互動，傳輸的資料為XML（當然，傳輸的資料不只是XML,現在更多使用json資料）。
- 同步互動：客戶端發出一個請求後，需要等待伺服器響應結束後，才能發出第二個請求；
- 非同步互動：客戶端發出一個請求後，無需等待伺服器響應結束，就可以發出第二個請求。
AJAX除了非同步的特點外，還有一個就是：瀏覽器頁面區域性重新整理；（這一特點給使用者的感受是在不知不覺中完成請求和響應過程）
場景：
優點：
- AJAX使用Javascript技術向伺服器傳送非同步請求
- AJAX無須重新整理整個頁面
二 基於jquery的Ajax實現
<button class="send_Ajax">send_Ajax</button> <script> $(".send_Ajax").click(function(){ $.ajax({ url:"/handle_Ajax/", type:"POST", data:{username:"Yuan",password:123}, success:function(data){ console.log(data) }, error: function (jqXHR, textStatus, err) { console.log(arguments); }, complete: function (jqXHR, textStatus) { console.log(textStatus); }, statusCode: {'403': function (jqXHR, textStatus, err) { console.log(arguments); }, '400': function (jqXHR, textStatus, err) { console.log(arguments); } } }) }) </script>
Ajax---->伺服器------>Ajax執行流程圖
三 案例
一 通過Ajax，實現前端輸入兩個數字，伺服器做加法，返回到前端頁面
def test_ajax(requests): n1=int(requests.POST.get('n1')) n2=int(requests.POST.get('n2')) return HttpResponse(n1+n2) $("#submit").click(function () { $.ajax({ url: '/test_ajax/', type: 'post', data: { n1: $("#num1").val(), n2: $("#num2").val() }, success: function (data) { console.log(data) $("#sum").val(data) }, }) }) <input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="sum"> <button id="submit">計算</button>
二 基於Ajax進行登入驗證
使用者在表單輸入使用者名稱與密碼，通過Ajax提交給伺服器，伺服器驗證後返回響應資訊，客戶端通過響應資訊確定是否登入成功，成功，則跳轉到首頁，否則，在頁面上顯示相應的錯誤資訊
def auth(request): back_dic={'user':None,'message':None} name=request.POST.get('user') password=request.POST.get('password') print(name) print(password) user=models.user.objects.filter(name=name,password=password).first() print(user) # print(user.query) if user: back_dic['user']=user.name back_dic['message']='成功' else: back_dic['message']='使用者名稱或密碼錯誤' import json return HttpResponse(json.dumps(back_dic)) $("#submit3").click(function () { $.ajax({ url: '/auth/', type: 'post', data: { 'user': $("#id_name").val(), 'password': $('#id_password').val() }, success: function (data) { {#console.log(data)#} var data=JSON.parse(data) if (data.user){ location.href='https://www.baidu.com' }else { $(".error").html(data.message).css({'color':'red','margin-left':'20px'}) } } }) }
traditional:true--->可以序列化一層列表，多層不行，要轉成json格式上傳
三、稍等、還沒完。
雖然我們實現了功能，但這還不夠，因為顯得不是很專業，所以我們稍作處理。
success: function (arg) { } 如果ajax提交資料成功，那麼就會自動執行這裡面的函式
html程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" onclick="AjaxSubmit();" value="提交"> <input type="button" onclick="AjaxSubmit_set();" value="提交集合"> <script src="/static/jquery-1.12.1.min.js"></script> <script> function AjaxSubmit(){ var host = '1.1.1.1'; var port = '1111'; $.ajax({ url:"/app01/ajax_submit/", type:'POST', data:{host:host,port:port}, success: function (arg) { } }); } function AjaxSubmit_set(){ var data_list = [ {'name':'chenchao','age':18}, {'name':'lisi','age':19}, {'name':'wangwu','age':13} ]; $.ajax({ url:"/app01/ajax_submit_set/", type:'POST', tradition:true, data:{data:JSON.stringify(data_list)}, success: function (arg) { //如果程式執行成功就會執行這裡的函式 var callback_dic = $.parseJSON(arg); if(callback_dic.status){ alert('成功'); }else{ alert(callback_dic.error); //把錯誤的資訊從後臺提出展示出來 } } }); } </script> </body> </html>
django下app裡views.py
# coding:utf-8 from django.shortcuts import render,HttpResponse,redirect def ajax_submit(request): print request.POST return render(request,'ajax_submit.html') import json def ajax_submit_set(request): ret = {'status': True,'error': ""} try: print request.POS except Exception, e: ret['status'] = False ret['error'] = str(e) j_ret = json.dumps(ret) return HttpResponse(j_ret)
還需吸收練習。。。