AJAX HTML PHP вопрос

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-файл

<p><?php<br />
  $q = $_GET['q'];</p>
<p>$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());
  ?>
</p>

Вот проблема: когда я набираю только одно значение в текстовом поле, оно будет сохраняться в моей базе данных несколько раз.

ЭГ: Я ввожу "Джордан". Когда я проверяю свою базу данных, она выглядит как

userid 1 J
userid 2 Jo
userid 3 Jor

и т. Д.

Answer 1

onkeypress сработает для КАЖДОГО нажатия клавиши, даже если вы делаете это в этом окне Итак, вот что происходит:

1. Вы набираете 'j'
2. showHint () запускается, отправляет 'j' на сервер
3. Сценарий вставляет 'j' в вашу пользовательскую таблицу
4. Вы вводите 'o', теперь в текстовом поле есть 'jo'
5. срабатывает showHint (), отправляет 'jo' на сервер
6. Сценарий вставки 'jo' в вашу пользовательскую таблицу
7. и т.д ...

Другими словами, вы вообще не показываете подсказку, вы просто слепо вставляете все, что пользователь вводит в вашу базу данных.

Если вы хотите показывать подсказки, тогда вы должны по крайней мере выполнить запрос SELECT и вернуть результаты на свою страницу.

Вы также должны использовать что-то вроде Mootools или jQuery для выполнения вызовов AJAX. Они будут обрабатывать сложные части построения / отправки запроса, не беспокоясь о том, какой браузер использует пользователь.

Также, прочитайте о SQL-инъекции , прежде чем выпускать такой скрипт, как ваш, в дикую природу.

У вас также неправильно сформированный запрос на вставку. Чтобы вставить новую запись, базовый синтаксис:

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

Вы смешали какой-то частичный запрос на обновление, формат которого

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

Я не вижу, как ваш запрос мог вставить что-либо в базу данных, как сейчас, так как синтаксис полностью нарушен.

Answer 2

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

Я знаю, что вы пытаетесь сделать, пожалуйста, используйте стандартные методы ... Единственная проблема в вашем коде на самом деле на нажатой клавише. Вам нужно вызвать запрос, когда вы уверены, что пользователь набрал слово полностью и больше не печатает. Я не думаю, что в JS это довольно просто, конечно, вы можете это сделать, но вам нужно потратить много человеко-часов.

Answer 3

В зависимости от того, какой браузер вы используете, событие onkeypress также будет запускать клавиши, которые не изменяют содержимое, такие как клавиши со стрелками, клавиши ввода или табуляции, F5 для обновления и т. Д. В некоторых браузерах даже нажатие клавиши shift может вызвать onkeypress. Подробнее см. на этой странице .

Поскольку ваш PHP-код не проверяет, является ли введенное значение новым, оно будет добавлять введенное значение при каждом нажатии одной из этих клавиш.

Кроме того, - это хорошая идея использовать для этого jQuery.