如何在JQuery项目中使用AJAX

为了方面讲解，我们将AJAX代码单独放到了一个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("用户名或者密码错误，请重新登录！");
        } else if (true == data.loginResult) {
          alert("登录成功！");
          var indexUrl = window.location.protocol+"//"+window.location.host+window.location.pathname+"html/index.html";
          window.location = indexUrl;
        }
      },
      error : function() {
        alert("服务器发生故障，请尝试重新登录！");
      }
    });
  });
});

上述js代码中，在data部分构造了一个user对象，通过post方法传递给服务器时，服务器会将其解析成一个UserEntity类型的user对象（神奇吧，具体的原理我暂时也不是很懂，希望明白人在微博下方留言，不吝赐教）。当contentType设置成"application/x-www-form-urlencoded;charset=UTF-8"时，提交的是一个from表单，而不是我们常用的json对象，但是服务器返回的是一个json对象。然后我们在success后面的函数中对返回的数据进行了解析（一个布尔类型的数据），根据结构进行了简单的跳转。

2. 其他请求服务器数据的方法

$.get()方法和$.post()方法都是基于$.ajax()方法实现的向服务器请求数据的方法，使用起来比起$.ajax()方法更加简便，需要设置的参数更少，但是我们更多时候使用的仍然是$.ajax()方法，因为它的可定制程度更高，更加的灵活易用。

2.1 $.get()方法

$.get([options])

该方法在传入options时，只需要简单的是设置好url、date、success等选项即可。例如

$.get(
  "/user/login",
  {name: encodeURI($("#username").val()},
  function(data){
    ....省略逻辑代码 
  }
)

由于get方法向服务器发送请求时，使用K/V格式，如果参数中含有中文字符，需要通过encodeURI()来进行转码。

2.2 $.post()方法

$.post([options])

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

$.post(
  "/user/login",
  {name: encodeURI($("#username").val()},
  function(data){
    ....省略逻辑代码 
  }
)

同样是在参数中含有中文字符时，需要使用encodeURI()进行转码操作

上述内容就是如何在JQuery项目中使用AJAX，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。