这一节我们来说一下如何用ajax提交要求?

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

form表单:

jsp请求返回json数据格式化Java框架从入门到装逼 用ajax要求后台数据 HTML

<!-- 采取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格式。