今天在开发一个用户信息更新模块的时候遇到了两个问题:
1、在我提交form表单的时候我希望在提交表单之后页面不刷新,同时返回更新数据
2、向后台POST表单信息的时候,后台显示POST url 404的错误

解决第一个问题的使用使用jquery.form的插件进行异步提交

<script type="text/javascript" src="jquery/jquery.js"></script></head>  
<script type="text/javascript" src="jquery/jquery.form.js"></script>  
$(function() {
            
            $("#user-update").submit(function(){
                $(this).ajaxSubmit({
                    type:"post",  //提交方式
                    dataType:"json", //数据类型
                    url:"${pageScope.basePath}user/update", //请求url
                    success:function(data){ //提交成功的回调函数
                        layer.alert("保存成功");
                    }
                });
                return false; //不刷新页面
            });
        });

我的form表单是这个样子的

        <form  class="am-form"  id="user-update" method="POST" >
          <fieldset>
            <h4>用户信息</h4>
            <input value name="id" style="display:none"/>
            <div class="am-form-group">
              <label for="doc-vld-name-2">用户名:</label>
              <input type="text" name="username" autocomplete="off" valuerequired/>
            </div>
            <div class="am-form-group">
              <label for="doc-vld-name-2">用户中文名:</label>
              <input type="text" name="chineseName" autocomplete="off" value required/>
            </div>

            <div class="am-form-group">
              <label for="doc-vld-desc-2">用户邮箱: </label>
              <input type="text"  name="email"  autocomplete="off" value  required/>
            </div>
            <div class="am-form-group">
              <label for="doc-vld-desc-2">用户最后登录时间:</label>
              <input type="text"   disabled='true' name="loginTime"   value required/>
            </div>
           <input class="am-btn am-btn-primary" type="submit" name="getresult"  value="更新" />
          </fieldset>
        </form>

使用这种方式即可对form进行异步提交,提交之后我发现后台反回了如下错误
图片描述

我的后台的java代码如下,采用了spring mvc 的restful风格进行编写的

@RequestMapping(value = "/update",method = RequestMethod.POST)
    public String updateUser(HttpServletRequest request,HttpServletResponse response) {
        
        response.addHeader("Access-Control-Allow-Origin", "*");
        /* 获取前台传送的参数 */
        String id = request.getParameter("id");
        ......
        
        /* 组装user */
        User user = new User();
        user.setId(Integer.parseInt(id));
        .......
        boolean updateResult = service.update(user);
        logger.debug("UserController+updateUser()-------->" + updateResult);
        return String.valueOf(updateResult);
    }

我发现不能返回我想要的字符串,于是使用@ResponseBody来返回数据(@responsebody表示该方法的返回结果直接写入HTTP response body中一般在异步获取数据时使用,在使用@RequestMapping后,返回值通常解析为跳转路径,加上@responsebody后返回结果不会被解析为跳转路径,而是直接写入HTTP response body中。比如异步获取json数据,加上@responsebody后,会直接返回json数据)于是返回结果成功。
@Responsebody原理
该注解用于将Controller的方法返回的对象,通过适当的HttpMessageConverter转换为指定格式后,写入到Response对象的body数据区。注意到使用@ResponseBody将会跳过视图处理部分,调用合适的HttpMessageConverter,将返回值写入输出流。


wyk1184
77 声望8 粉丝