Javascript开发jQuery Ajax 返回值如何阻止form表单提交？

在实际的开发业务中，我们一般会利用ajax检测一些东西，然后阻止表单提交。如果我们在 ajax 代码中直接使用 return false; 这里必须在 $.ajax 中设置 async:false 任然无法阻止表单提交，所以我们使用 the_submit 来控制表单是否提交。

JAVASCRIPT代码部分

<script type="text/javascript"> $(function() {     $("#addForm input.btn_submit").click(function(){         var the_submit = true;         if( $("input.name").val() == "" ){             alert('请填写机房');             $("input.name").focus();             the_submit = false;         }         if( $("select.status").val() == "" ){             alert('请选择状态');             $("select.status").focus();             the_submit = false;         } 	$.ajax({             url:"/idc_xiaoshou/check_third_party_computer_room_name",             dataType:"html",             type:"post",             data:{ name:$('input.name').val() },             async:false,////////////             success:function(data){               console.log(data);                 if( data == 0 ){                     alert("机房名重复");                     $("input.name").focus();                     the_submit = false;                 }             },             error:function(data){                 alert('UNKNOW ERROR');                 the_submit = false;             } 	});          if( !the_submit ){             return false;         }     });   });	 </script>

HTML代码部分

            <form enctype="multipart/form-data" action="/idc_xiaoshou/save_third_party_computer_room" method="post" id="addForm" name="form1" >                    <input type="hidden" name="id" value="<?php echo $obj['id']; ?>"/>               <table border="0" cellpadding="0" cellspacing="0" class="table2" style="margin:0 auto">                             <tr>                       <td align="right">机房：</td>                       <td><input class="textinput1 name" value="<?php echo $obj['name'];?>" type="text" name="name" style="width: 200px;"/></td>                       <td><span class="color1">*</span></td>                   </tr>                   <tr>                       <td align="right">状态：</td>                       <td>                           <select style="min-width: 100px" name="status" class="textinput1 status">                               <option value="" >所有</option>                               <?php foreach( $statusAry as $v):?>                               <option value="<?php echo $v;?>"><?php echo $v;?></option>                               <?php endforeach;?>                           </select>                               </td>                       <td><span class="color1">*</span></td>                   </tr>                   <tr>                       <td align="right">备注：</td>                       <td><textarea name="others" class="textinput1" cols="50" rows="10"><?php echo $obj['others']?></textarea></td>                       <td></td>                   </tr>                           <tr>                       <td></td>                       <td colspan="2"><input type="submit" value="提交" class="btn_submit"/></td>                   </tr>             </table>             </form> 

腾讯云限时秒杀【点击购买】

搬瓦工，CN2高速线路，1GB带宽，电信联通优化KVM，延迟低，速度快，建站稳定，搬瓦工BandwagonHost VPS优惠码BWH26FXH3HIQ，支持<支付宝> 【点击购买】！

Vultr$3.5的日本节点，512M内存/500G流量/1G带宽，电信联通优化，延迟低，速度快【点击购买】！

阿里云香港、新加坡VPS/1核/1G/25G SSD/1T流量/30M带宽/年付￥288【点击购买】

`微信`扫码 加好友