SpringMVC + Ajax + Json 表单提交

上一次我们使用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对象，之后的操作就和上一篇文章里一样了。