Ajax

Ajax即「Asynchronous Javascript And XML」（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術,AJAX = 異步 JavaScript和XML（標準通用標記語言的子集）,AJAX 是一種用於建立快速動態網頁的技術。經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。

這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

-----傳統的網頁（不使用 AJAX）若是須要更新內容，必須重載整個網頁頁面；

AJAX 不須要任何瀏覽器插件，但須要用戶容許JavaScript在瀏覽器上執行。

 

Ajax工做原理：

1. 基本參數

  $.ajax，這個是JQuery對ajax封裝的最基礎步驟，經過使用這個函數能夠完成異步通信的全部功能。也就是說什麼狀況下咱們均可以經過此方法進行異步刷新的操做。可是它的參數較多，有的時候可能會麻煩一些。看一下經常使用的參數：    

1 2 3 4 5 6 7 8 9 10 11

var configObj  =  {         method    / / 數據的提交方式：get和post         url    / / 數據的提交路徑         async    / / 是否支持異步刷新，默認是true         data     / / 須要提交的數據         dataType    / / 服務器返回數據的類型，例如xml,String,Json等         success     / / 請求成功後的回調函數         error    / / 請求失敗後的回調函數      }    $.ajax(configObj); / / 經過$.ajax函數進行調用。

2. 實例分析

1 2 3 4 5 6 7 8 9 10 11 12

$.ajax({      url:  '/host' ,                / /  數據提交地址      type :  "POST" ,                / /  提交類型      data: { 'k1' :  123 ,  'k2' :  "root" },         / /  提交的內容 字典格式      success: function(data){　　　　 / /  客戶端會一直等待服務端返回的數值              / /  data是服務器端返回的字符串          var obj  =  JSON.parse(data);      } })    建議：永遠讓服務器端返回一個字典 return  HttpResponse(json.dumps(字典))

3. 簡單的先後端交互

Ajax代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$(function(){      $( '#ajax_submit' ).click(function () {          $.ajax({              url: "/test_ajax/" ,              type : "POST" ,              data:{ 'hostname' :$( '#host' ).val(), 'ip' :$( '#ip' ).val(), 'port' :$( '#port' ).val(), 'b_id' :$( '#sel' ).val()},              success:function (data) {                  if (data = = 'OK' ){                      location. reload ()    / /  從新加載頁面                  } else  {                      alert(data);                  }              }          })      }) })

Django代碼：

1 2 3 4 5 6 7 8 9 10 11 12

def  test_ajax(request):      print (request.method)      h  =  request.POST.get( 'hostname' )      i  =  request.POST.get( 'ip' )      p  =  request.POST.get( 'port' )      b  =  request.POST.get( 'b_id' )      print (h,i,p,b)      if  h  and  len (h) >  5 :         # 主機名長度判斷          models.Host.objects.create(hostname = h,ip = i,port = p,b_id = b)  # 建立數據          return  HttpResponse( "OK" )　　　　 # 返回OK 嚴格大小寫      else :          return  HttpResponse( "主機名過短" )　　 # 返回錯誤提示

4. 對先後端交互完善（當後端有問題時，前端收不到data，頁面無反應）

Ajax代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$(function(){      $( '#ajax_submit' ).click(function () {          $.ajax({              url: "/test_ajax/" ,              type : "POST" ,              data:{ 'hostname' :$( '#host' ).val(), 'ip' :$( '#ip' ).val(), 'port' :$( '#port' ).val(), 'b_id' :$( '#sel' ).val()},              success:function (data) {                  console.log(data)     / /  data { "data" : null,  "status" : false,  "error" :  "\u4e3b\u673a\u540d\u592a\u77ed" }                  var obj  =  JSON.parse(data);      / /  反序列化 把字符串data換成對象obj                                                  / /  序列化 JSON.stringify() 把obj轉換爲字符串                  if (obj.status){                      location. reload ()    / /  從新加載頁面                  } else  {                      $( '#error_msg' ).text(obj.error)                  }              }          })      }) })

Django代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

import  json def  test_ajax(request):      ret  =  { 'status' : True , 'error' : None , 'data' : None }   # 返回一個字典      try :          h  =  request.POST.get( 'hostname' )          i  =  request.POST.get( 'ip' )          p  =  request.POST.get( 'port' )          b  =  request.POST.get( 'b_id' )          print (h,i,p,b)          if  h  and  len (h) >  5 :         # 主機名長度              print ( "ok" )              models.Host.objects.create(hostname = h,ip = i,port = p,b_id = b)          else :              ret[ 'status' ]  =  False              ret[ 'error' ]  =  '主機名過短'      except  Exception as e:          ret[ 'status' ]  =  False          ret[ 'error' ]  =  '請求錯誤'      return   HttpResponse(json.dumps(ret))        # 對字典進行序列化

5. serialize自動獲取表單數據

<form class="add-form" method="POST" action="/home/">
            <div class="group">
                <input id='host' type="text" placeholder="主機名" name="hostname" />
            </div>

            <div class="group">
                <input id='ip' type="text" placeholder="IP" name="ip" />
            </div>

            <div class="group">
                <input id='port' type="text" placeholder="端口" name="port" />
            </div>

            <div class="group">
                <select id='sel' name="b_id">
                    {% for op in b_list %}
                    <option value="{{ op.id }}">{{ op.caption }}</option>
                    {% endfor %}
                </select>
            </div>
            <input type="submit" value="提交" />
            <a id="ajax_submit">要上天提交</a>
            <input id="cancel" type="button" value="取消" />
            <span id="error_msg"></span>
</form>

 

Ajax代碼：

1 2 3 4 5 6

$.ajax({      url: "/test_ajax/" ,      type : "POST" ,              data:$( '.add-form' ).serialize(),   / /  獲取表單數據提交 必須是form表單      success:function (data) {          })

6. Ajax代碼補充（traditional，dataType）

Ajax代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$(function(){      $( '#add_submit_ajax' ).click(function(){          $.ajax({              url:  '/ajax_add_app' ,              data: { 'user' :  123 , 'host_list' : [ 1 , 2 , 3 , 4 ]},              / /  data: $( '#add_form' ).serialize(),              type :  "POST" ,              dataType:  'JSON' ,        / /  內部對傳過來的數據直接執行JSON.parse 拿到的數據直接爲對象而非字符串              traditional: true,       / /  添加此項 當字典裏包含列表時候，後端能夠getlist到裏面的數據              success: function(obj){                  console.log(obj);              },              error: function () {      / /  未知錯誤時執行，指前端收不到後臺發送的obj時，執行              }          })      }); })

Django代碼：

1 2 3 4 5 6 7 8

def  ajax_add_app(request):      ret  =  { 'status' : True ,  'error' : None ,  'data' :  None }         app_name  =  request.POST.get( 'app_name' )      host_list  =  request.POST.getlist( 'host_list' )      obj  =  models.Application.objects.create(name = app_name)      obj.r.add( * host_list)      return  HttpResponse(json.dumps(ret))