Question

这是我的scripts.js

function showHint(str)
{
if (str.length==0)
  {
  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","inputProcess.php?q="+str,true);
xmlhttp.send();
}

这是我的HTML

<script type="text/javascript" src="scripts.js"></script>
<form>
  Type your name here : <input type="text" onkeypress="showHint(this.value)" name="name" />
</form>

这是我的PHP文件

<?php

  $q = $_GET['q'];
$dbc=mysql_connect("localhost","root","") or die (mysql_error());
  mysql_select_db('input_oop') or die (mysql_error());

  $sql = "INSERT INTO users set name = '".$q."'";
  mysql_query($sql) or die (mysql_error());
  ?>

问题是：当我在文本框中只键入一个值时，它会多次保存在我的数据库中。

EG：我输入“Jordan”。当我签入我的数据库时，它显示为

userid 1 J
userid 2 Jo
userid 3 Jor

等等

Answer 1

onkeypress即使你在那个盒子里也会触发每个按键。所以这就是发生的事情：

您输入'j'
触发showHint（），将'j'发送到服务器
脚本将'j'插入用户表
您输入'o'，文本字段中现在有'jo'
触发showHint（），将'jo'发送到服务器
脚本将'jo'插入用户表
等...

换句话说，你根本没有显示任何提示，只是盲目地将任何用户类型插入数据库。

如果您想显示提示，那么您应该至少执行“SELECT”查询并将结果返回到您的页面。

您还应该使用Mootools或jQuery之类的内容来执行AJAX调用。他们将处理构建/发送请求的难点，而不必担心用户使用的浏览器。

同样，在将诸如你的脚本发布到野外之前，先阅读有关SQL injection的内容。

您还有一个格式错误的插入查询。要插入新记录，基本语法为：

INSERT INTO sometable (field1, field2, field3, ...) VALUES (value1, value2, value3, ...)

你在那里遇到某种部分'更新'查询，其格式为

UPDATE sometable SET field1=value1, field2=value2, ....

我无法看到你的查询如何像现在一样将任何内容插入到数据库中，因为语法完全被破坏了。

Answer 2

根据您使用的浏览器的不同，onkeypress事件也将触发不改变内容的键，如箭头键，输入或制表键，F5刷新等等。浏览器甚至按下shift可能会触发onkeypress。有关详细信息，请参阅this page。

由于您的PHP代码未检查输入的值是否为新值，因此每次按下其中一个键时，它都会添加输入的值。

此外，是一个使用jQuery的好主意。

Answer 3

function sendRequest(str) {
 var xhttp = new XMLHttpRequest();
 xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
   }
 };
 xhttp.open("GET", "inputProcess.php?q="+str, true);
 xhttp.send();
}

function showHint(str) {
 if (str.length==0) { 
  document.getElementById("txtHint").innerHTML="";
  return;
 } else {
 sendRequest(str)
 }
}

我知道您要尝试做什么请使用标准方法...代码中唯一的问题实际上是onKeypressed。当您确定用户已完全输入单词并且不再输入时，您需要调用该请求我不认为它在JS中非常简单您当然可以使用但是您必须使用需要很长时间才能完成。

AJAX HTML PHP问题

3 个答案: