上一次我们使用SpringMVC实现了一个表单提交应用，我们的表单长成这个样子：
图1
如果你在线填写过诸如"XXX市XXX职位申请"的话，那么你就会知道网页上需要的数据有多少，上三代都要被查，毕竟这是一个数据时代嘛。现在假设今晚就是申请表填写的deadline，但你发现你家的网不太好，刷新一次网页需要一分钟，这时候你填好了所有数据，点提交按钮，一分钟之后，因为时间匆忙，网页告诉你：密码格式不多，好，改一下，再次提交，地址格式不对。。。再来一分钟，邮箱不小心写错了。。。此处省略一万次提交。。。。
这时候你就像，我去，能不能实时反馈啊？
不知道你什么时候开始使用的百度，有没有发现从什么时候开始，搜索框可以试试动态根据你的输入展示搜索结果，以前可是没有的，那这个是怎么实现的呢？
图2
不错，这个就是Ajax，AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。这是Ajax的官方解释，其实它的工作机制是这样的：
图3
js实时处理你在网页上的动作，一旦触发，就将需要的数据发送到后台进行处理，后台处理之后实时反馈到网页上。
那么前台和后台数据交互的载体是什么呢？不再是xml文件，而是json数据。
现在我们来分别看看前台和后台是怎么工作的。
先看看前台部分：
图4
对应的代码：
图5
这里给登录按钮一个id，方便引用，因为我们希望在点击登录之后在后台验证或是创建用户。
那么这个点按钮的动作怎么触发呢？
图6
$(document).ready(function()这句话让页面stand by，随时准备响应网页上的动作。
$("#login").click(function()这里引用上面说的button id，给这个动作加了一个click动作，相当于onclick属性，然后用$.ajax表示这是一个ajax，我们来看看里面的主体都是些啥：
url:"test/testJSON.do",表明这个动作的响应url（controller里设置的RequestMapping）
type:"POST",（提交模式）
dataType:"json",（数据格式）
contentType:"application/json;charset=UTF-8",（内容格式）
data:JSON.stringify({（构造json格式的数据）
userName:$("#userName").val(),
userPassword:$("#userPassword").val()
})
图6后面的部分是成功和失败的提示。
紧接着你肯定要问，后台怎么接受数据的？我们来看看：
图7
图8
可以看到，前台传送的json数据的userName:$("#userName").val(),key值（userName）必须和User里定义的一样，这样后台就能通过@ResponseBody的到转换后的User对象，就能拿到一个完整的User对象，之后的操作就和上一篇文章里一样了。
网友评论