Question

我只是在探索ajax来学习它。

我尝试以下JavaScript测试代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ajax Demo</title>
<meta name="" content="">
<script type="text/javascript">

function aa(){

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.open("GET","getprod.php",false);
xmlhttp.send();

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>

<form>
    <input type="text" name ="txta"  onchange="aa();">  </input>
    <br>
    <div id ='myDiv' style="width: 400px;height: 300px; overflow-y: auto;border: #e87517 1px solid"> 

  <?php
      $mysqli=new mysqli('localhost', 'root', 'password', 'ajax');
      if ($mysqli->connect_errno) {
      die("Connect failed". $mysqli->connect_error);
      }
      $mysqli->set_charset("utf8");

  if ($result = $mysqli->query("select id, name from test;")){
      while ($row = $result->fetch_assoc()) {
      echo $row['id'], " - " , $row['name'], "<br>";
      }//while 
  }//if 

   $result->close(); 
   $mysqli->close();
   ?>   
 </div> 
 </form>
</body>
</html>

还有几行“getprod.php”。

  <?php
   echo "123";
   ?>

当我更改textbox中的值时，Ajax会根据需要返回字符串“123”并将其放在div中，但几秒后，div再次填充了MySQL的结果，这是不可取的。

1）我的代码出了什么问题？（目标是：当我在文本框中更改值时，只返回来自ajax的字符串 - “123”必须永久出现在div容器中。） 2）文本框更改事件在失去焦点或按键盘上的ENTER时发生。如何在没有此操作的情况下触发更改事件

提前致谢。

Answer 1

您发布的代码中没有任何内容会导致页面重新加载。
＆＃34;没有这个动作＆＃34; - 但当？请考虑使用oninput事件 - http://www.w3schools.com/jsref/event_oninput.asp。

Answer 2

尝试将onchange事件更改为onkeypress或oninput。

ajax页面全部重新加载后。

2 个答案: