第一篇正文--关于form的提交（ajax，submit）

       最近在工作中遇到了form提交的问题，在这里我先讲述一下需求，页面中有一个表单，表单里有file文件，但是这里和之前的区别是后台并不是在upload文件之后返回一个url回来，而是让我直接在form中包裹文件传输。

       说起来我也是个小白- -，在之前的工作的时候都是用ajax来进行post请求的来完成的。突然的让我用form来提交我明显愣了，不知道该怎么来进行。然后在咨询下写好了action，写好submit按钮。name填写了字段名称，接着，后台说传的数据不对，检查数据发现传的不是原来key：value的形式，而是下面这种

{records :{[
     {
       "ConfigName":"appid",
       "ConfigValue":"wx3f580089a44f0db9"
     },
     {
       "ConfigName":"appsecret",
       "ConfigValue":"c2ca162e2fe86608c183a6e6c6709f16"
     },
      ...
     ]}
}

     这就让我又吃了一鲸。这里第一次用到了<input  type = "hidden" name="recordes[0][ConfigName]" value="appid"> 这里也是学到了新知识，在这里用到了隐藏的input ， 这里的input可以跟着表单一起提交，提交的是相当于一个固定的key的名字，接着再搭配一个input来传输value。这也是我的新经历。

<input type="hidden" name="records[0][ConfigName]" value="companyname">
<input id="companyname" type="text" name="records[0][ConfigValue]"  placeholder="请输入公司名称"data-text="请输入公司名称" data-pattern="notempty">

         接着来讲述的小白的我的接下来的痛点，因为有file文件，我一直试图用表单提交，表单的特性大家都懂，跳转和回调会难处理。但是要是控制submit之后的事件，网上大多的介绍都是用ajax，但是ajax处理的data是不能包裹file的。期间还找到了一个jq的form插件，我发现我按网上的代码去写还是gg（网上的东西看看就行了，真的不靠谱，网站还是同一篇文章来回转，也不知转的都测试过没有）。

        这里遇到了一个小的新东西，在操作onsubmit()的时候,里面会有check的检测数据方法，在onsubmit里面直接return false是可以直接停止操作的，直接返回，不会进行表单提交。check不符合数据的时候可以直接return false。数据正常想要提交就要return true，return true就要进行跳转的操作，而且返回的数据会在跳转的页面上，与我们提交完在本页面返回保存成功的需求不符。

       接下来就是我这次最大的收获，使用iframe的方法来进行处理。之前一直知道iframe来阻止跳转新页面，一直没有使用过，这次发现iframe的方法并不麻烦。这里主要分为2个部分，一个是提交的方法，一个是处理回调的方法。

       首先是提交方法,这里在form上添加target="iframe"，这样平时form提交的页面就会在iframe里进行展现。这样就完成了提交表单不跳转的需求。

<form id="form" action="url" target="nm_iframe" method='post' >
<iframe id="iframe" name="nm_iframe" style="display:none;"></iframe>

       接着，我们在iframe里已经有了后台返回的数据，这个时候我们要对iframe里的内容进行操作，我当时得到是直接一个json在body中显示，这个时候我要在父页面调用iframe里的数据。这时候用到

var data = JSON.parse($(window.frames["nm_iframe"].document).find('body').html());

      这里在[ ]里填的是iframe的name！

      这里填写的是iframe的name！

      这里填写的是iframe的name！

      这个坑我当时怎么都拿不到，又在网上细看了代码，发现这里的参数是iframe里的name属性，而不是我自己添加的id属性。这里的data我是用来处理的返回值。总算是处理了这个页面的需求。

       这里总结一下，现在填写表单的时候我用过了ajax，submit，同时还尝试了iframe的方法，ajax是我们最常见的异步加载数据的最优选择，在需要进行表单提交的时候这时候submit是用iframe是一个很好的处理方法，不要感觉操纵子页面很难处理，其实尝试了之后发现并不难处理。写代码不要在没有进行实践的时候对一种方法进行否定，多尝试，多踩坑才能走的更稳。

 

 

 

 

 

转载于:https://my.oschina.net/u/2553451/blog/877226