Javascript 基于PHP返回更改内部HTML_Javascript_Php_Html_Ajax

Javascript 基于PHP返回更改内部HTML

javascript php html ajax

Javascript 基于PHP返回更改内部HTML,javascript,php,html,ajax,Javascript,Php,Html,Ajax,我有一个简单的网页，表单由一个文本输入框和一个按钮组成。按钮的onclick事件在头部触发脚本。该脚本调用一个单独的PHP页面，并检查提交的文本。如果值为“foo”，则应表示正确，如果是其他值，则应表示不正确无论我如何调整它，我都无法在div的内部HTML中显示任何id为response\u one的内容。我正在学习W3Schools的教程，但似乎无法做到这一点。我已经在下面介绍了html/PHP，如果有任何提示都将不胜感激 HTML： <!DOCTYPE html> <ht

我有一个简单的网页，表单由一个文本输入框和一个按钮组成。按钮的onclick事件在头部触发脚本。该脚本调用一个单独的PHP页面，并检查提交的文本。如果值为“foo”，则应表示正确，如果是其他值，则应表示不正确

无论我如何调整它，我都无法在div的内部HTML中显示任何id为response\u one的内容。我正在学习W3Schools的教程，但似乎无法做到这一点。我已经在下面介绍了html/PHP，如果有任何提示都将不胜感激

HTML：

<!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">
    <input type="submit" onclick="show(this.value)">
  </form>
  <div id="response_one"></div>
</div>
  </body>
</html>


看见
功能显示（str）{
如果（str.length==0）{
document.getElementById（“response_one”）.innerHTML=“”；
回来
}否则{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
document.getElementById（“response_one”）.innerHTML=this.responseText；
}
};
open（“GET”、“check_one.php？q=“+str，true”）；
xmlhttp.send（）；
}
}
答复:

并检查_one.php：

<?php
$q = $_REQUEST["q"];
$q = strtolower($q)

$result = ""

if ($q === "foo") {
  $result = "Correct";
} else {
  $result = "Incorrect";
}

echo $result
 ?>

您似乎忘记了代码末尾的一些“；”。怎么样

<?php
$q = $_REQUEST["q"];
$q = strtolower($q)

$result = ""

if ($q === "foo") {
  $result = "Correct";
} else {
  $result = "Incorrect";
}

echo $result
 ?>

到

问题这里有多个问题：

您的按钮是一个提交输入。单击后，浏览器将提交表单。您的AJAX都无关紧要，因为页面将在您看到任何结果之前刷新

您的按钮不包含该值。输入字段

不起作用。运行

show（this.value）

是错误的，因为您实际上不打算检查submit按钮的值

您的

check_one.php

文件中存在多个语法错误。请运行命令行

php-l check_one.php

或使用浏览器浏览

check_one.php？q=foo

进行检查

快速修复我将把php语法错误留给您，重点放在表单上。下面是我将如何修复它：

将提交按钮从

更改为

。这将阻止在单击时提交表单

更改

onClick

函数以访问文本输入的值

答案

，而不是

此.value

代码


看见
功能显示（str）{
如果（str.length==0）{
document.getElementById（“response_one”）.innerHTML=“”；
回来
}否则{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
document.getElementById（“response_one”）.innerHTML=this.responseText；
}
};
open（“GET”、“check_one.php？q=“+str，true”）；
xmlhttp.send（）；
}
}
答复:
检查

一旦你修正了你的

检查_one.php

，你就会得到你想要的结果

有待改进的地方您的表单仍然可能有问题。如果用户按“回车”而不是单击按钮，则将提交您的表单。因此，与其截取按钮的

单击事件，不如捕获表单的提交事件
以下是改进措施：
在表单中添加一个
用于查找表单并截取
使用event.preventDefault（）
阻止表单提交
找到答案
值并执行XMLHttpRequest
代码

看见
答复:
//将脚本移到正文之后，以便表单元素在正文之前存在
//此脚本正在运行。
document.getElementById（'check-form'）。addEventListener（'submit'，函数（evt）{
evt.preventDefault（）；//防止表单提交
var str=evt.target[“answers”].value；//获取answers字段值
//前面在'show（）'函数中的逻辑
如果（str.length==0）{
document.getElementById（“response_one”）.innerHTML=“”；
回来
}否则{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
document.getElementById（“response_one”）.innerHTML=this.responseText；
}
};
open（“GET”、“check_one.php？q=“+str，true”）；
xmlhttp.send（）；
}
});
和请求是否已发送？检查浏览器开发人员控制台（网络），如果已发送，则检查响应。这可能是PHP服务器的问题。我感谢您的详细回复和帮助。我下班回家后要试试这个。在照顾一个四个月大的孩子时尝试编写代码是很困难的，因此非常感谢您的帮助@我知道你的感受，伙计。我有一个2岁的孩子在家：-）再次万分感谢！我修复了php并进行了第一组建议的更改。这个周末我将检查你的第二套改进。现在它工作得很好。
<?php
$q = $_REQUEST["q"];
$q = strtolower($q);

$result = "";

if ($q === "foo") {
  $result = "Correct";
} else {
  $result = "Incorrect";
}

echo $result;
 ?>