AJAX在JQuery中的应用详解

<span class="input-group-addon" id="password_span">PassWord</span>
<!--从这里输入一个password-->
<input name="password" type="password" class="form-control" placeholder="PassWord" aria-describedby="password_span">
</div>
<!--提交表单-->
<input type="submit" id="loginBtn" class="btn btn-default" value="Login" />
</div>
</body>
<script type="text/javascript" src="<%=basePath %>js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="<%=basePath %>js/login.js"></script>
</html>

为了方面讲解，我们将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()方法，因为它的可定制程度更高，更加的灵活易用。