在实际的开发业务中，我们一般会利用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> 