AJAX表单提交不能正常工作 - AJAX form submission doesn't work properly

我有一个PHP表单，通过AJAX通过advancedSearch.php提交。

AJAX正在工作，但是当我提交表单时，浏览器只是将我重定向到advancedSearch.php，而不是通过AJAX更新HTML中的表单DIV。

下面是代码:

<form class="search" action="advancedSearch.php" onSubmit="advancedSearch();return false;" method="post"> ... </form>
JAVASCRIPT:

function advancedSearch() { var phone=document.getElementByName("phone")[0].value; console.log(phone); var criteria=document.getElementByName("criteria")[0].value; var age=document.getElementByName("age")[0].value; var city=document.getElementByName("city")[0].value; var data = 'phone=' + phone + '&criteria=' +criteria + '&age=' +age + '&city=' +city; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } /*xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("list").innerHTML=xmlhttp.responseText; } }*/ xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { document.getElementById("list").innerHTML = xmlhttp.responseText; } } xmlhttp.open("POST","advancedSearch.php",true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(data); }

尝试添加id到您的表单元素，也使用e.preventDefault();

我只张贴例子发送值根据你

<form class="search" action="advancedSearch.php" onSubmit="advancedSearch(event);" method="post"> <div id="phone"> <label class="camp">Phone:</label><br> <input type="text" name="phone" size="23" id="phone"><br> </div><br> <div id="age"> <label class="camp">Age:</label><br> <select name="criteria" id="criteria"> <option value="">Choose...</option> <option value="0">Grater than...</option> <option value="1">Smaller than...</option> </select> <input type="text" name="age" size="3" id="age"/><br> </div><br> <div id="city"> <label class="camp">City:</label><br> <input type="text" name="city" size="23" id="city"><br> </div><br> <div id="searchButton"> <input type="submit" name="searchButton" value="Search"/> </div> </form> <script> function advancedSearch(e) { e.preventDefault(); var phone=document.getElementById("phone").value; var criteria= document.getElementById("criteria").value; var age= document.getElementById("age").value; var city= document.getElementById("city").value; var data = 'phone=' + phone + '&criteria=' +criteria + '&age=' +age + '&city=' +city; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { alert(xmlhttp.responseText); exit; } } xmlhttp.open("POST","advancedSearch.php",true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(data); } </script>

一定要加上:

event.preventDefault();

到表单提交事件监听器函数，以防止默认的表单提交行为发生

为了防止页面重定向，jQuery提供了一个函数:

e.preventDefault();

使用方法:

假设你有这样的代码:
<form class="search" action="advancedSearch.php" method="post"> <input type="submit" name="searchButton" onSubmit="advancedSearch();return false;" value="Search"/> </form> function advancedSearch(e) { //here your javascript code. return false; }