1. 程式人生 > >form表單同步提交和非同步提交

form表單同步提交和非同步提交

同步提交:
html:

<form id="form" method='"post" action="${ctx}/user/saveUser">
    <input type="text" id="name" name="name" value="${user.name}"/>
    <input type="text" id="age" name="age" value="${user.age}"/>
</form>
<input id="save-btn" type="submit" value="儲存"/>

controller:

@RequestMapping(value = "/saveUser",method = RequestMethod.POST)
    public String saveUser(User user,HttpServletRequest request, HttpServletResponse response) throws Exception {
        try{
            userService.save(user);
        }catch (Exception e){
            e.printStackTrace();
        }
        return
"redirect:/user/userList"; }

ajax非同步提交:
注意:form標籤去掉method和action屬性,儲存按鈕input標籤型別變為button
* controller方法中返回String,則ajax中dataType型別為’text’, *
html:

<form id="form">
    <input type="text" id="name" name="name" value="${user.name}"/>
    <input type="text" id="age" name="age" value
="${user.age}"/>
</form> <input id="save-btn" type="button" value="儲存"/> <script> $(document).ready(function() { //表單非同步提交 $("#save-btn").on("click",function(){ $.ajax({ type: 'post', data: $('#form').serialize(), url: '${ctx}/user/saveUser', cache:false, dataType:'text', success: function (data) { if("fail"!=data){ layer.msg('儲存成功'); window.location.href = "${ctx}/user/userList?userId="+data; }else{ layer.msg('儲存失敗'); } } }) }) </script>

controller:

@RequestMapping(value = "/saveUser",method = RequestMethod.POST)
    public String saveUser(User user,HttpServletRequest request, HttpServletResponse response) throws Exception {
        try{
            User user = userService.save(user);
            return user.getUserId();
        }catch (Exception e){
            e.printStackTrace();
            return "fail";
        }
    }