Проблемы
Множество проблем здесь:
- Ваша кнопка является входом для отправки. При нажатии ваш браузер отправит форму. Ни один из ваших AJAX не будет иметь значения, потому что страница обновится, прежде чем вы увидите какой-либо результат.
- Ваша кнопка не содержит значения. Поле ввода
<input type="text" name="answers"> делает. Выполнение show(this.value) является ошибкой, потому что вы действительно не планируете проверять значение кнопки отправки. - В вашем файле
check_one.php имеется несколько синтаксических ошибок. Пожалуйста, запустите командную строку php -l check_one.php или используйте браузер для просмотра check_one.php?q=foo, чтобы проверить ее.
Быстрое исправление
Я оставлю вам ошибку синтаксиса php и сосредоточусь на вашемсформироваться. Вот как я собираюсь это исправить:
- Измените кнопку отправки с
<input type="submit"> на <button type="button">. Это предотвратит отправку формы при нажатии. - Измените функцию
onClick, чтобы получить доступ к значению вашего ввода текста answers вместо this.value.
. Код
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>See</title>
<script>
function show(str) {
if (str.length == 0) {
document.getElementById("response_one").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("response_one").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "check_one.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<div id="mainbody">
<form>
Answer:
<input type="text" name="answers">
<button type="button" onClick="show(this.form['answers'].value)">Check</button><!-- only this line is changed -->
</form>
<div id="response_one"></div>
</div>
</body>
</html>
Как только вы исправите check_one.php, вы получите желаемый результат.
Комната для улучшений
Все еще могут быть проблемы сваша форма. Если пользователь нажмет «Enter» вместо нажатия кнопки, ваша форма будет отправлена. Поэтому вместо того, чтобы просто перехватывать событие click кнопки, вам лучше было бы захватить событие отправки формы .
Итак, вот улучшения:
- Добавьте атрибут id к вашей форме.
- Используйте document.getElementById , чтобы найти форму и перехватить событие отправки .
- Используйте
event.preventDefault() для предотвращения отправки формы. - Найдите значение
answers и введите XMLHttpRequest.
Код
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>See</title>
</head>
<body>
<div id="mainbody">
<form id="check-form"><!-- added id="check-form" -->
Answer: <input type="text" name="answers">
<input type="submit"><!-- removed onClick attribute -->
</form>
<div id="response_one"></div>
</div>
</body>
<script>
// Moved script after body so the form element would exist before
// this script is run.
document.getElementById('check-form').addEventListener('submit', function (evt) {
evt.preventDefault(); // prevent form submission
var str = evt.target["answers"].value; // get the answers field value
// The logics previously in your `show()` function
if (str.length == 0) {
document.getElementById("response_one").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("response_one").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "check_one.php?q=" + str, true);
xmlhttp.send();
}
});
</script>
</html>