ajax实现form表单提交

昨天在做 ajax 申请链接提交表单的时候,发现提交了两次,Debug 的时候,也能发现控制器会执行两次。当然,数据库里也是两条数据。然后今天起来,修改了一下,结果出现了中文乱码情况,原因是多次解码,这里大家可以百度 serialize 相关信息。

最终整理了一下代码,能够完美实现要求。不刷新提交表单,只提交一次,中文不乱吗。

代码如下

html 部分

  1. <form id="apply_link_form">
  2.       <input type="text" name="link_name" id="link_name" placeholder="如:言曌博客" required="required">
  3.        <input type="text" name="link_url" id="link_url" placeholder="如:https://liuyanzhao.com" required="required">
  4.        <input type="text" name="link_description" id="link_description" placeholder="如:一个后端开发者的成长笔记" >
  5.        <input type="text" name="link_owner_contact" id="link_owner_contact" placeholder="如:邮箱service@liuyanzhao.com" required="required">
  6.        <input id="submit" name="submit" type="submit" value="提交申请" >
  7.         <
  8. </form>

注意:form 标签只填一个 id 即可,不用填 action 和 method

 

js 部分

  1. //ajax提交信息
  2.     $("#apply_link_form").submit(function(){
  3.         parent.layer.close(index); //再执行关闭
  4.         $.ajax({
  5.             async: false,
  6.             type: "POST",
  7.             url:'${pageContext.request.contextPath}/link/apply',
  8.             contentType : "application/x-www-form-urlencoded; charset=utf-8",
  9.             data:$("#apply_link_form").serialize(),
  10.             dataType: "text",
  11.             success: function () {
  12.               },
  13.             error: function () {
  14.             }
  15.         })
  16.     })

注意:第9行填 data:$("#formid").serialize() 最终数据是 name=tom&pass=123456 之类的

 

 

控制器代码

  1. @RequestMapping(value = "link/apply",method = {RequestMethod.POST})
  2. @ResponseBody
  3. public void applyLink(HttpServletRequest request) throws Exception {
  4.     String linkName = request.getParameter("link_name");;
  5.     String linkUrl = request.getParameter("link_url");
  6.     String linkDescription = request.getParameter("link_description");
  7.     String linkOwnerContact = request.getParameter("link_owner_contact");
  8.     LinkCustom linkCustom = new LinkCustom();
  9.     linkCustom.setLinkName(linkName);
  10.     linkCustom.setLinkUrl(linkUrl);
  11.     linkCustom.setLinkDescription(linkDescription);
  12.     linkCustom.setLinkOwnerContact(linkOwnerContact);
  13.     linkCustom.setLinkStatus((byte0);
  14.     linkCustom.setLinkCreateTime(new Date());
  15.     linkCustom.setLinkUpdateTime(new Date());
  16.     linkService.applyLink(linkCustom);
  17. }

 

效果图如下

ajax实现form表单提交

 

查看数据表,已添加了一条数据

ajax实现form表单提交

 

本文链接:https://liuyanzhao.com/6193.html

  • 微信
  • 赶快加我聊天吧
  • weinxin
  • 博客交流群
  • 海纳百川,大家来水
  • weinxin
言曌

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: