昨天在做 ajax 申请链接提交表单的时候，发现提交了两次，Debug 的时候，也能发现控制器会执行两次。当然，数据库里也是两条数据。然后今天起来，修改了一下，结果出现了中文乱码情况，原因是多次解码，这里大家可以百度 serialize 相关信息。
最终整理了一下代码，能够完美实现要求。不刷新提交表单，只提交一次，中文不乱吗。
代码如下
html 部分
-
<form id="apply_link_form">
-
-
<input type="text" name="link_name" id="link_name" placeholder="如:言曌博客" required="required">
-
-
<input type="text" name="link_url" id="link_url" placeholder="如:https://liuyanzhao.com" required="required">
-
-
<input type="text" name="link_description" id="link_description" placeholder="如:一个后端开发者的成长笔记" >
-
-
<input type="text" name="link_owner_contact" id="link_owner_contact" placeholder="如:邮箱[email protected]" required="required">
-
-
<input id="submit" name="submit" type="submit" value="提交申请" >
-
<
-
</form>
注意：form 标签只填一个 id 即可，不用填 action 和 method
js 部分
-
//ajax提交信息
-
$("#apply_link_form").submit(function(){
-
parent.layer.close(index); //再执行关闭
-
$.ajax({
-
async: false,
-
type: "POST",
-
url:'${pageContext.request.contextPath}/link/apply',
-
contentType : "application/x-www-form-urlencoded; charset=utf-8",
-
data:$("#apply_link_form").serialize(),
-
dataType: "text",
-
success: function () {
-
-
},
-
error: function () {
-
-
}
-
})
-
})
注意：第9行填 data:$("#formid").serialize() 最终数据是 name=tom&pass=123456 之类的
控制器代码
-
@RequestMapping(value = "link/apply",method = {RequestMethod.POST})
-
@ResponseBody
-
public void applyLink(HttpServletRequest request) throws Exception {
-
-
String linkName = request.getParameter("link_name");;
-
String linkUrl = request.getParameter("link_url");
-
String linkDescription = request.getParameter("link_description");
-
String linkOwnerContact = request.getParameter("link_owner_contact");
-
LinkCustom linkCustom = new LinkCustom();
-
linkCustom.setLinkName(linkName);
-
linkCustom.setLinkUrl(linkUrl);
-
linkCustom.setLinkDescription(linkDescription);
-
linkCustom.setLinkOwnerContact(linkOwnerContact);
-
linkCustom.setLinkStatus((byte) 0);
-
linkCustom.setLinkCreateTime(new Date());
-
linkCustom.setLinkUpdateTime(new Date());
-
linkService.applyLink(linkCustom);
-
-
}
效果图如下
查看数据表，已添加了一条数据
本文链接：https://liuyanzhao.com/6193.html