Question

我尝试在用户输入文本并按下提交按钮后在同一页面中执行AJAX功能脚本。

提交后，AJAX脚本会将结果发送到findme.php，后者对数据库执行查询。 findme.php上的查询工作正如我在实现ajax函数之前测试过的那样。

我采用了W3school的方法，但没有提供。我无法调用脚本并将值发送到findme.php

有谁知道我做错了什么？

qwerty.php

<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","findme.php?q="+str,true);
  xmlhttp.send();
}
</script>

 <tr>
<form name="search" method="post" action="">
Name: <input type="text" name="findName"/>
Location: <input type="text" name="findLocation"/>
Price: <input type="text" name="findPrice"/>
<Select NAME="123">
<Option type="checkbox" value="">
<Option type="checkbox" value="=">Equal
<Option type="checkbox" value="<">Less than
<Option type="checkbox" value=">">More than
</select>

<input onclick="showUser(); return false;" type="submit" name="search" value="Search"/>
</form>

  </tr>
<tr>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</tr>

Answer 1

调用函数后必须返回false，否则表单提交会导致失去ajax调用。

<input onclick="showUser(); return false;" type="submit" name="search" value="Search"/>

Answer 2

由于您使用的是输入类型=＆＃34;提交＆＃34; ，在表单上尝试onSubmit事件。 ASA

<form name="search" method="post" action="" onSubmit="return showUser();">

不要忘记return关键字。在showUser（）中返回false;当str ==＆＃34;＆＃34;就像那样。

在表单的同一页面内调用JS函数（AJAX）

2 个答案: