springmvc下js控制表单提交（表单提交前检验，提交后获取json返回值）

这个问题我搞了四天，终于搞懂。因为对js很不熟悉。郁闷的是后台代码出错总可以设置断点调试，前端js代码出错只能通过浏览器提供一些运行数据来分析，很不习惯。

首先说下逻辑：这是一个注册功能，我希望，注册前端表单提交后，后台处理后，返回一个json数据，前端用jquery接收，并弹出弹框显示是否注册成功以及提示信息。

所以首先可以，写出后端代码：

/**
* @ClassName: RegisterController 
* @Description: Register CONTROLLER类
* @author 无名
* @date 2016-4-25 下午2:54:41 2016-05-01返回注册提示信息
* @version 1.0
 */
@Controller
@RequestMapping("/register")
public class RegisterController
{
    @Resource(name = "userServiceImpl")
    private UserService userService;
    
    @RequestMapping(value = "/show", method = RequestMethod.GET)
    public String show()throws Exception
    {
        return "registerPage";
    }
    
    @RequestMapping(value = "/submit", method = RequestMethod.POST)
    @ResponseBody
    public String submit(User user,String repassword) throws Exception
    {
        JSONObject jo = new JSONObject();    
        if(null == user || StringUtil.isStringEmpty(repassword))
        {
            setJOWhenIputWrong(jo);
            return jo.toJSONString();
        }    
        RegisterMessage registerMessage = checkUserInfor(user,repassword);
        setJSONObject(jo,registerMessage);
        if(!registerMessage.isSuccess())
        {
            return jo.toJSONString();
        }
        userService.save(user);
        return jo.toJSONString();
    }
    
    private RegisterMessage checkUserInfor(User user,String repassword)
    {
        RegisterMessage registerMessage = new RegisterMessage();
        List<User> users = userService.findByUserName(user.getUsername());
        if(!users.isEmpty())
        {
            registerMessage.setSuccess(false);
            registerMessage.setReturnMessage("This username has been existing!");
            return registerMessage;
        }
        if(!user.getPassword().equals(repassword))
        {
            registerMessage.setSuccess(false);
            registerMessage.setReturnMessage("The passwords you inputed are different!");
            return registerMessage;
        }
        registerMessage.setSuccess(true);
        registerMessage.setReturnMessage("You have been the new member of RiXiangBlog!");
        return registerMessage;
    }
    
    private void setJSONObject(JSONObject jo,RegisterMessage registerMessage)
    {
        jo.put("success", registerMessage.isSuccess());
        jo.put("returnMessage", registerMessage.getReturnMessage());
    }
    
    private void setJOWhenIputWrong(JSONObject jo)
    {
        jo.put("success", false);
        jo.put("returnMessage", "input wrong!");
    }
}

可以看出/show路径下是注册页面，注册表单填写后提交，请求路径/submit。

@ResponseBody这个注解很关键，它意味着spring将这个方法标示为返回数据而不是页面路径。

处理好后端后，就是前端的jquery的问题。之前我走入误区。form表单的submit按钮点击后就会请求/submit路径，然后我写$.ajax()方法试图获取。而这个方法会按照写好的url去再请求/submit路径。所以等于是请求了两次/submit路径，且第二次是没有提交信息的请求。

所以需要做的是，利用jquery来控制表单的提交。然后获取返回结果。在处理函数中解析json。

jquery控制表单提交需要额外的jquery库。jquery.form.js

http://malsup.com/jquery/form/#download

最后我的前端代码如下：

              <script type="text/javascript" src="<%=basePath %>Jquery/jquery-2.2.3.min.js"></script>
              <script type="text/javascript" src="<%=basePath %>Jquery/jquery-form.js"></script>              
              <script type="text/javascript">
                  $().ready(function()
                  {     
                         $('#registerForm').ajaxForm(function(data)
                         {  
                               var parsedJson  = $.parseJSON(data); 
                               if(parsedJson.isSuccess == true)
                               {
                                     alert("注册成功"+" " + parsedJson.returnMessage);
                               }
                               else
                               {
                                     alert("注册失败"+" " + parsedJson.returnMessage);
                                }
                          });   
                 });  

               </script>
   

2016.12.01补充：

      hh，之前还是太嫩了。那时还不懂得前端表单提交前校验。用jquery很容易实现。

      需要的是控制整个提交过程，提交前验证，提交后获取后端返回的json返回值。

             $(document).ready(function() { 
                  $('#passwdForm').ajaxForm({ 
                         dataType:      'json',
                         beforeSubmit:  validate,   
                         success:       successFunc
                     });
               });
               function validate(formData, jqForm, options) {
                    if (!formData[0].value) {
                           alert("旧密码不能为空！！(;¬_¬) ( ´◔ ‸◔`) (눈_눈) ( ∙̆ .̯ ∙̆ ) (;￢д￢) (“▔□▔)");
                           return false;
                    }
                    if (!formData[1].value) {
                           alert("新密码不能为空！！π__π T.T ε(┬┬＿┬┬)3 ╥﹏╥ ┬＿┬ (╥╯^╰╥)");
                           return false;
                    }
                    if (!formData[2].value) {
                           alert("请再次输入密码！！ ԅ(¯﹃¯ԅ) （¯﹃¯）");
                           return false;
                    }
                    if (formData[1].value != formData[2].value) {
                           alert("两次密码输入不一致!!(,,•́ . •̀,,) (๑•́ ₃•̀๑) (๑•́ ₃ •̀),,Ծ‸Ծ,,");
                           return false;
                    }
                    if (formData[1].value.length < 6) {
                           alert("密码长度至少6位!!  (:3[▓▓] (:3[▓▓▓▓▓▓▓▓▓] (¦3[▓▓]");
                           return false;
                    }
                    var queryString = $.param(formData);
                    return true; 
                }
                function successFunc(data) {
                    if (data.success) {
                         alert("修改密码成功"+" " + data.returnMessage);
                         location.href = "/RiXiang_blog/space/list.form"; 
                    }
                    else {
                        alert("修改密码失败"+" " + data.returnMessage);
                    }
                } 

上述代码，$('#passwdForm').ajaxForm({ dataType: 'json',beforeSubmit: validate, success: successFunc});的写法是使用了jquery的，ajaxForm方法，接受一个参数。对象结构。规定了是json数据结构，验证方法为validate，返回值判断方法为successFunc。此外就没什么可多说的了。

具体可以看看《锋利的JQUERY》一书，写的足够详细。