上一次我们使用SpringMVC实现了一个表单提交应用,我们的表单长成这个样子:
如果你在线填写过诸如"XXX市XXX职位申请"的话,那么你就会知道网页上需要的数据有多少,上三代都要被查,毕竟这是一个数据时代嘛。现在假设今晚就是申请表填写的deadline,但你发现你家的网不太好,刷新一次网页需要一分钟,这时候你填好了所有数据,点提交按钮,一分钟之后,因为时间匆忙,网页告诉你:密码格式不多,好,改一下,再次提交,地址格式不对。。。再来一分钟,邮箱不小心写错了。。。此处省略一万次提交。。。。
这时候你就像,我去,能不能实时反馈啊?
不知道你什么时候开始使用的百度,有没有发现从什么时候开始,搜索框可以试试动态根据你的输入展示搜索结果,以前可是没有的,那这个是怎么实现的呢?
不错,这个就是Ajax,AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。这是Ajax的官方解释,其实它的工作机制是这样的:
js实时处理你在网页上的动作,一旦触发,就将需要的数据发送到后台进行处理,后台处理之后实时反馈到网页上。
那么前台和后台数据交互的载体是什么呢?不再是xml文件,而是json数据。
现在我们来分别看看前台和后台是怎么工作的。
先看看前台部分:
对应的代码:
这里给登录按钮一个id,方便引用,因为我们希望在点击登录之后在后台验证或是创建用户。
那么这个点按钮的动作怎么触发呢?
$(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后面的部分是成功和失败的提示。
紧接着你肯定要问,后台怎么接受数据的?我们来看看:
可以看到,前台传送的json数据的userName:$("#userName").val(),key值(userName)必须和User里定义的一样,这样后台就能通过@ResponseBody的到转换后的User对象,就能拿到一个完整的User对象,之后的操作就和上一篇文章里一样了。