这一节我们来说一下如何用 ajax 提交请求？

我们先不讲ajax的原理，还是先以实战为主，看一下这个东西到底怎么用的？

form表单：

<!-- 采用post表单提交 -->
 <form style="margin-left:200px;" id="myform" name="myform" method="post" onsubmit="return sumbitTest();" 
 action="login.do"> 
 <table> 
 <tr> 
 < td >用户名:</td> 
 <td> <input  type ="text" name="username" id="username"/> </td> 
 </tr> 
 <tr> 
 <td>密码:</td> 
 <td> <input type="password" name="password" id="password"/> </td> 
 </tr> 
 <tr> 
 <td colspan="2"> 
 <input style="display:none" id="login_btn" type="submit" value="提交"> 
 </td> 
 </tr> 
 
 <div id="errMsg" style="color:red">${errMsg}</div>
 
 <input id="loginType" type="text" name="loginType" hidden='true'/> </td>
 
 </table> 
 </form> 
 

修改提交方法：

 function doLogin(type){
 if(type == 'QQ'){
  alert ('您选择的是QQ登录');
 }
 
 if(type == 'weixin'){
 alert('您选择的是 微信 登录');
 }
 
 $("#loginType").val(type);
 
 //$("#login_btn").click();
 
 //如果验证通过，就开始进行提交 
 if(sumbitTest()){
 $.ajax({
 type: "GET",
 url: "login.do",
 data: {username:$("#username").val(), password:$("#password").val()},
 dataType: " JSON ", //预期服务器返回的数据
 success:  function (data){
 if(data.errCode < 0){
 $("#errMsg").show().html(data.errMsg).stop(true,true).fadeOut(3000);
 }else{
 //登录成功，做其他处理
 alert("恭喜你，登录成功！") 
 }
 
 }
 });
 }
 
 
 }
 
 //验证登录信息 
 function sumbitTest(){
 
 return true;
 
 //在这个方法中可以对登录信息进行校验 （作业，用户名和密码都不能为空） 
 if(!$("#username").val()){
 alert("用户名不能为空！");
 return false;
 }
 
 if(!$("#password").val()){
 alert("密码不能为空！");
 return false; 
 }
 
 }
 

ajax是异步操作，和同步操作的form表单提交不同。

例子一：同步就是打电话，对方不接就一直等。异步就是发微信，对方回不回我都可以去做别的事情。

例子二：同步就像玩RPG回合制游戏，比如口袋妖怪，你打我一下，我打你一下。异步就像玩红色警戒，我可以先派20辆 天启坦克 去轰炸对面的兵工厂，下完指令后还可以立刻回到主基地造一座雷达。

OK，刚才我们看到ajax提交有一个属性是text，这就表示返回的数据格式是文本。实际上，我们一般用的数据格式并非text，而是JSON。我们需要在Servlet中手动给我们的JSP页面返回一个json数据。

WebUtil.writeObject(resp, JSONObject.fromObject(resultData) );
 

其中，resultData是一个包含错误码和错误信息的专用类：

public class ResultData {
 
 private int errCode = 0;
 private String errMsg;
 
 public int getErrCode() {
 return errCode;
 }
 public void setErrCode(int errCode) {
 this.errCode = errCode;
 }
 public String getErrMsg() {
 return errMsg;
 }
 public void setErrMsg(String errMsg) {
 this.errMsg = errMsg;
 }
}
 

因为最终转换的时候肯定默认调用resultData对象的 toString 方法，所以我们不妨直接重写ResultData类的toString方法，返回JSON格式。