Question

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

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

这是代码：
的 HTML

<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);

}

任何帮助将不胜感激，谢谢。

Answer 1

请务必添加：

event.preventDefault();

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

Answer 2

为了防止页面重定向，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;
}

Answer 3

尝试将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>

AJAX表单提交无法正常工作

3 个答案: