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》一書，寫的足夠詳細。