為了方面講解，我們將AJAX代碼單獨(dú)放到了一個(gè)js文件中

$(function() {
  $("#loginBtn").click(function() {
    console.log("login");
    var username = $("input[name=username]").val();
    var password = $("input[name=password]").val();
    var user = {
      "username" : username,
      "password" : password
    };
    $.ajax({
      type : "post",
      dataType : "json",
      data : user,
      contentType : "application/x-www-form-urlencoded;charset=UTF-8",
      url : "user/login",
      async : false,
      success : function(data) {
        if (false == data.loginResult) {
          alert("用戶名或者密碼錯(cuò)誤，請(qǐng)重新登錄！");
        } else if (true == data.loginResult) {
          alert("登錄成功！");
          var indexUrl = window.location.protocol+"http://"+window.location.host+window.location.pathname+"html/index.html";
          window.location = indexUrl;
        }
      },
      error : function() {
        alert("服務(wù)器發(fā)生故障，請(qǐng)嘗試重新登錄！");
      }
    });
  });
});

上述js代碼中，在data部分構(gòu)造了一個(gè)user對(duì)象，通過(guò)post方法傳遞給服務(wù)器時(shí)，服務(wù)器會(huì)將其解析成一個(gè)UserEntity類(lèi)型的user對(duì)象（神奇吧，具體的原理我暫時(shí)也不是很懂，希望明白人在微博下方留言，不吝賜教）。當(dāng)contentType設(shè)置成"application/x-www-form-urlencoded;charset=UTF-8"時(shí)，提交的是一個(gè)from表單，而不是我們常用的json對(duì)象，但是服務(wù)器返回的是一個(gè)json對(duì)象。然后我們?cè)?code>success后面的函數(shù)中對(duì)返回的數(shù)據(jù)進(jìn)行了解析（一個(gè)布爾類(lèi)型的數(shù)據(jù)），根據(jù)結(jié)構(gòu)進(jìn)行了簡(jiǎn)單的跳轉(zhuǎn)。

2. 其他請(qǐng)求服務(wù)器數(shù)據(jù)的方法

$.get()方法和$.post()方法都是基于$.ajax()方法實(shí)現(xiàn)的向服務(wù)器請(qǐng)求數(shù)據(jù)的方法，使用起來(lái)比起$.ajax()方法更加簡(jiǎn)便，需要設(shè)置的參數(shù)更少，但是我們更多時(shí)候使用的仍然是$.ajax()方法，因?yàn)樗目啥ㄖ瞥潭雀?，更加的靈活易用。

2.1 $.get()方法

$.get([options])

該方法在傳入options時(shí)，只需要簡(jiǎn)單的是設(shè)置好url、date、success等選項(xiàng)即可。例如

$.get(
  "/user/login",
  {name: encodeURI($("#username").val()},
  function(data){
    ....省略邏輯代碼 
  }
)

由于get方法向服務(wù)器發(fā)送請(qǐng)求時(shí)，使用K/V格式，如果參數(shù)中含有中文字符，需要通過(guò)encodeURI()來(lái)進(jìn)行轉(zhuǎn)碼。

2.2 $.post()方法

$.post([options])

.post()方法的使用和.post()方法的使用和.get()方法基本一致，事例如下：

$.post(
  "/user/login",
  {name: encodeURI($("#username").val()},
  function(data){
    ....省略邏輯代碼 
  }
)

同樣是在參數(shù)中含有中文字符時(shí)，需要使用encodeURI()進(jìn)行轉(zhuǎn)碼操作

上述內(nèi)容就是如何在JQuery項(xiàng)目中使用AJAX，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。