1.古老的表單提交
這種形式呢，比較早，以後端為主。前端提交表單，後端驗證(jsp,request.getParameter(""))。這種方式後端做的比較多，我就不特別說明了。
2.AJAX的數據提交
這種形式呢，現在用的較多。後端基本就做接口，做權限，其他的都交由前端去完成。這個呢就是我們今天主要說的。
3.表單和AJAX結合
適合的才是最好的。這點我深信不疑

常見的幾種方式，我已經說明了。接下來我們談一談我們需要什麽東西。
場景一：

XXX:我們公司要做接口，我要怎麽辦？
LN:哦，接口文檔發我看看。
XXX:什麽是接口文檔，我沒有啊？
LN:接口文檔由四部分組成：（這個看個人習慣有的寫得特別簡陋，所以第一次的時候問清楚每個參數意思）
    
 
1.接口地址 URL
    2.請求方式 get/post
    3.請求參數 page,pageNum
    4.響應參數 state,list
XXX:哦哦，這樣啊，那我和他們要一下。
    接口：/mvc/training/ge
    請求：key,orderBy,begin,length
LN:沒給你響應，也沒有給你請求方式啊。
    1.給接口補全URL,域名/mvc/training/ge。
    2.把你補全的URL，扔到瀏覽器的地址欄，看看返回的是什麽。當然如果請求參數裏面有必填項，那你要用URL?key=value&key2=value2的形式模擬get請求。
        
 
2.1 瀏覽器把服務器端的響應給你顯示了出來。然後你對照這個問後端人員每個是什麽意思。
        2.2 拋出405錯誤。這個就比較淒慘了。禁止get請求，那你有兩種方式一個是下載一款軟件可以模擬post請求，一個是直接寫AJAX，然後改成post方式。
    3.由上面我們已經知道接口的四部分了，那我們就要用ajax獲取我的數據了.
     $.ajax({
             url: "/mvc/training/ge",//請求接口
             type: "POST",//請求方式
             data: {key:1},//請求參數
             dataType: "json",//
 
響應類型
             success: function(data, textStatus){//訪問成功的回調函數，參數是響應，描述狀態的字符串
                 console.log(data);
             },
             error: function(XMLHttpRequest, textStatus, errorThrown){//訪問失敗的回調函數，參數是XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選);
             }
    });
    個人大力推薦這個，第二步就可以省去了。success的console.log(data);也可以看到響應，完美的劇情。當然，你不要告訴我，你不會看控制臺。
XXX:恩恩。好的。我試試去。    

場景二：
XXX:這是我的接口。我要怎麽做我的頁面啊。邏輯怎麽寫。

LN:

$.ajax(
    method:"GET",//對於請求類型
    url:"/isNickName",//請求url，這個我抹黑了。直接復制過來就可以了
    dataType: ‘json‘,
    data: {nickName:$.trim($("#checktips").val())},//這個是一個驗證是否重名的接口。參數只有一個 名字
).done(function(data){
    if(data.code == 0){//data.code的值這個是後端人員規定的。
        console.log("請求成功");
        if(data.object==1){//1為重復
            console.log("這個nickName重復啦");
            $("#retips").show();
        }else if(data.object==0){
            console.log("這個nickName不重復");
            $("#retips").hide();
        }else{
            console.log("未知異常");
        }
    }else if(data.code == -2){
        console.log("你沒有權限，通常來講，你是沒有登錄");
    }else if(data.code == -5){
        console.log("參數錯誤哦。");
    }else{
        console.log(data.result);
    }
}).fail(function(a,b,c){
    console.log("接口出問題啦");
})

我簡單的解釋一下上面這個代碼，.done()裏面的代碼肯定每次都不一樣。所以說肯定不能網上隨便復制一個就可以，和公司的後端人員問清楚每一個參數的作用意義，對於寫代碼是特別有幫助的。從接口文檔可以看出，這個人後端十分的懶，我所有的參數都是訪問了以後然後自己猜出來的。

場景有上面的兩個，我覺得已經可以了。就不在寫了

文章的最後我們來說一下 調用 和 .done事件裏面的代碼 雖然這兩個沒有關系。

1.調用
    最簡單的調用方法$(selector).on("click",function(){裏面放剛才場景二的代碼})。
    但是我們有的時候用的不是click.
    blur 失去焦點的時候觸發
    change 失去焦點然後判斷是否改變，改變觸發
    keyDown keyup 按下擡起（這個是最好的，但是要用去抖，下一篇說）
2.done(function(){})
    這個裏面一般來說，就是我們用得到的數據去和我們的DOM節點做一些操作。這個每個項目都不一樣。但是肯定都和DOM的操作啦渲染啦有關。
    
    

前後端交互實現