Ajax--表单映射
程序员文章站
2022-04-26 14:54:35
...
本文实例讲述了python映射列表。分享给大家供大家参考。具体分析如下:
1 在表单序列化映射到后台实体对象中,走了蛮多弯路,特总结如下。
表单:
<form id="form01" enctype="multipart/form-data"> <input type="text" name="name" id="name"/> <input type="text" name="password" id="password"/> <input type="button" value="确认" onclick="upload()"> </form>
JS方法:
function upload() { $.ajax({ type:"POST", url : '<%=basePath%>upload01.do', //用于文件上传的服务器端请求地址 data : formToJson($("#form01")), contentType: 'application/json; charset=utf-8', success : function(data, status) //服务器成功响应处理函数 { alert(data); }, error : function(data, status, e)//服务器响应失败处理函数 { alert(e); } }); } //将表单数据转化为JSON数据 form为表单对象,如$("#form01"),返回序列化数据 function formToJson(form) { var data = form.serialize(); data = decodeURIComponent(data, true);//防止中文乱码 data = data.replace(/&/g, "','"); data = data.replace(/=/g, "':'"); data = "({'" + data + "'})"; obj = eval(data); obj=JSON.stringify(obj); return obj; }
需要注意的是,为什么不直接用serialize()序列化表单呢?还要这麻烦。当时做的时候,$(“#form”).serialize()返回的是name=1&password=1的形式,不知道jquery怎么序列化成这样的,在网上找了半天,未果,看到一篇博客,http://www.cnblogs.com/suruozhong/p/6256457.html,将这种奇怪的序列化的结果通过换字符转成JSON的形式,然后OK,感谢博主。
后台控制器:
@RequestMapping(value = "upload01", method = RequestMethod.POST) public void uploadText01( HttpServletRequest request, HttpServletResponse response, @RequestBody User user) { System.out.println("run in"); }
需要说明的是在对象的前面加@RequestBody,前台的JSON数据才会映射到对象中,不然会报一系列的错:
Unsupported Media TypeContent type 'application/json;charset=UTF-8' not supported
不过有可能是你的实体名称与标签中的name属性值不匹配导致这种错误。
出现表单无法映射到后台实体还有可能是缺少架包的原因,
<!-- JSON支持 --> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <!--指定jdk版本 --> <classifier>jdk15</classifier> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> </dependency>
2 直接在方法中提交表单
<form id="form01" enctype="multipart/form-data"> <input type="text" name="name" id="name" /> <input type="password" name="password" id="password" /> <input type="button" onclick="doConfirmForm()" value="确认"> </form>
function doConfirmForm(){ var form01=$("#form01"); form01.submit(); }
3 Form表单转FormData然后JSON提交
<body> <form id="form"> name:<br> <input type="text" name="name"> <br> password:<br> <input type="text" name="password"> </form> </body><script type="text/javascript" src="./jquery-1.10.2.js"></script><script type="text/javascript"> var formData = new FormData($("#form")[0]); formData.append("createDate",new Date()); $.ajax({ type: "POST", data: convertFormDataToJson(formData), url: "http://localhost:80/test/requestBody", contentType: 'application/json; charset=utf-8', dataType: "json", success: function(result) { console.log(result); } }); function convertFormDataToJson(formData) { var objData = {}; for (var entry of formData.entries()){ objData[entry[0]] = entry[1]; } return JSON.stringify(objData); } </script>
相关推荐:
jsp中 表单submit提交映射Servlet的问题_html/css_WEB-ITnose
以上就是Ajax--表单映射的详细内容,更多请关注其它相关文章!
上一篇: 分享利用c#实现windows远程桌面连接实例教程
下一篇: 使用gdb调试nginx源码