ajax成功回调失灵，页面刷新 表格增删改查 并向后端传值 踩坑+实例

项目需求，表格增删改查，并提交数据给后台，后台返回。

问题1：form提交的数据key值一样，如果用.serialize()传递为字符串形式后台同事无法接收。

解决方法：调用.serializeArray()，发送为数组形式。

问题2：ajax发送成功后，成功回调总是失灵，并且可以取到后端传的值，但是成功回调函数不执行ps:偶尔执行。（个人认为此坑真的非常坑。）

原因：html页面元素input type=“submit” /button写在了form表单中，导致点击时刷新页面。导致成功回调总是不执行。研究了一下午。最后发现是这个原因。真的是想撞墙。。

解决方法: button元素从form里挪出来。

下面附上部分代码：

html： <div class="page-content">


        <div class="row">
        
            <div class="col-xs-12">
               <!-- PAGE CONTENT BEGINS -->
                <div class="col-md-9 col-md-offset-1">
                    <!--begin表单-->
                    <form id="form1" class="my_form">
                        <div class="form-group col-xs-12" style="margin-top:40px;">
                            <label class="control-label col-lg-2 col-sm-3 col-xs-3" id="dicGroupLab1">字典组</label>
                            <label class="col-lg-9 col-sm-9 col-xs-9">
                                <input type="text" id="group" name="group">
                            </label>
                        </div>
                        <div class="col-lg-6 col-sm-6 col-xs-12">
                           <label class="control-label col-lg-3 col-sm-3 col-xs-3">字典KEY</label>
                           <div style="width:900px;">
        <input type="button" id="but" class="btn btn-sm btn-primary" value="添加字典key" style="margin-left:616px;">
    </div>
    
                           <div class="col-lg-9 col-sm-9 col-xs-9">
                               <table id="tab">
        <tr id="firstTr">
           <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
       </tr>
       <tr id="first" align='center'>
              <td><input type='text' name='id' style='border:1px solid #fff' /></td>
              <td><input type='text' name='key' style='border:1px solid #fff' /></td>
              <td><input type='text' name='value' style='border:1px solid #fff'/></td>
              <td><select name='dataType'><option value='1'>xxx</option><option value='2'>xxx</option></select></td>
              <td><input type='text' name='priority' style='border:1px solid #fff' /></td>
              <td><input type='text' name='desc' style='border:1px solid #fff' /></td>
              <td><a href='#' οnclick='delFirstTr()'>删除</a></td>
          </tr>
    </table>
   
                           </div>
                       </div>  
                    </form>
                     <!--end表单-->
                    <div class="row">
                        <div style="float:right;margin-right:-96px;">
                            <button id="submitData" class="btn btn-sm btn-primary">提交</button>
                            <a class="btn btn-sm btn-primary" href="${pageContext.request.contextPath}/wallet/product/dataDicList.htm">取消</a>
                        </div>
                    </div>
                </div>


                <script type="text/javascript">
                    var $path_base = "/";//this will be used in gritter alerts containing images
                </script>
                <!-- PAGE CONTENT ENDS -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.page-content -->
</div><!-- /.main-content -->

js:

<script type="text/javascript">
   $(function(){
       $("#my_ywgl").addClass("active");//todo:更改为数据字典管理  
       $("#submitData").on("click",function(){submitEdit();}); 
   });
   $("#tab tr").attr("align","center");
   //增加<tr/>
   $("#but").click(function(){
   var _len = $("#tab tr").length;        
           $("#tab").append("<tr id="+_len+" align='center'>"
                               +"<td><input type='text' name='id' style='border:1px solid #fff' /></td>"
                               +"<td><input type='text' name='key' style='border:1px solid #fff' /></td>"
                               +"<td><input type='text' name='value' style='border:1px solid #fff' /></td>"
                               +"<td><select name='dataType'><option value='1'>xxx</option><option value='2'>字符串</option></select></td>"
                               +"<td><input type='text' name='priority' style='border:1px solid #fff' /></td>"
                               +"<td><input type='text' name='desc' style='border:1px solid #fff' /></td>"
                               +"<td><a href=\'#\' οnclick=\'deltr("+_len+")\'>删除</a></td>"
                           +"</tr>");                       
   }) 
   //删除tr
   var deltr =function(index)
    {
        var _len = $("#tab tr").length;
        $("tr[id='"+index+"']").remove();//删除当前行   
    }
   //删除首行
   var delFirstTr =function(index)
   {
       $("#first").remove();//删除当前行 
   }
    function submitEdit(){
           $.ajax({
               type:"POST",
               url:"${pageContext.request.contextPath}/dic/insert",
               data:$("#form1").serializeArray(),
               dataType:"json",
               async:true,
               cache:false,
               success:function(data) {
                   var d=data;if(typeof (d)=="string"){d=JSON.parse(d);}
                   if(d.result=="SUCCESS"){
                    alert("新建成功");
                       location.href="/xxx";
                   }else{alert(d.errorDesc);}
               },error:function(xhr,status,error) {console.error("fail");}});
       }


</script>

文章结束。小码农会继续努力。