Question

我刚刚开始使用AJAX。我正在尝试创建一个测试，我在文本输入框中输入一些文本，单击表单上的提交按钮，并在我的页面上显示该文本。我得到的即时错误是404错误（www.mysite.com/ajaxFunction（）），但我确信还有其他人尚待发现。谁能帮助我纠正这个让我开始使用AJAX？我正在试着开始转动我的车轮。另外，请注意我正在调用PHP脚本，因为这是我的最终目标所需要的，这就是为什么我不仅仅使用JavaScript本身。谢谢！

这是html：

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>

<body>

    <script language="javascript" type="text/javascript">
    <!-- 
    //Browser Support Code
        window.onload = function ajaxFunction() {
            document.myform.action = getFeedback();
        }

        function getFeedback() {
            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.onreadystatechange=function() { 
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    document.getElementById("feedback").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","scripts/handle_feedback.php",true);
            xmlhttp.send();
        }
    //-->
    </script>

    <div id="leftsidebox"></div>

    <div id="textboxdiv">
        <form name="myform">
            Text Here: <input type="text" name="textbox" id="name" />
            <button type="submit">Submit</button>
        </form>
    </div>

    <div id="feedback">
    </div>

</body>

</html>

handle_feedback.php

<?php
    $mytext = $_REQUEST['textbox'];
    return $mytext;
?>

编辑：这是我最新的HTML代码。我对php进行了更改（将'return'切换为'echo'）

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
    window.onload = function ajaxFunction() {
        document.myform.onsubmit = getFeedback;
    }

    function getFeedback() {
        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.onreadystatechange=function() { 
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("feedback").innerHTML=xmlhttp.responseText;
            }
        }
        var textvalue = document.getElementById("name").value;
        xmlhttp.open("GET","scripts/handle_feedback.php?textbox="+textbox,true);
        xmlhttp.send();
    }
//-->
</script>

<div id="textboxdiv">
    <form name="myform">
        Text Here: <input type="text" name="textbox" id="name" />
        <button type="submit">Submit</button>
    </form>
</div>

<div id="feedback">
</div>

脚本/ handle_feedback.php

<?php
    $mytext = $_REQUEST['textbox'];
    echo $mytext;
?>

Answer 1

应该{{1}}而不是echo。函数中使用return来返回数据。

return

此外，您必须将参数发送到php文件

<?php
$mytext = $_REQUEST['textbox'];
echo $mytext;
?>

Answer 2

这不会做你期望它做的事情：

document.myform.action = getFeedback();

您可能希望在提交表单时调用getFeedback。事实并非如此。当浏览器尝试运行该代码时，它会意识到：“哦，嘿，我们正在分配action。但等等，在右侧，有一个函数调用！我必须评估该函数调用，以便找到将action设置为的返回值！“因此，您的浏览器会立即尽职地调用getFeedback。由于getFeedback不会返回任何内容，因此会将action设置为undefined。男孩，这很有帮助。

如果我们希望在提交表单时调用JavaScript函数，则设置action不是正确的方法。那么正确的方法是什么？ 事件监听器。附加事件监听器的最常用方法是使用addEventListener，但由于您的用例相当简单，我们将使用更简单，经常被忽略的方式：设置onsubmit：

document.myform.onsubmit = getFeedback;

请注意，我们不在getFeedback之后有括号。这是故意的。我们希望将onsubmit设置为getFeedback函数本身，而不是其返回值。

您还在使用textbox而未定义它。当然，它存在于文档中，但这并不意味着它是脚本中可用的变量。要访问它，您需要首先获取元素，然后获取该元素的值：

document.getElementById('name').value

可能让你获得的另一件事是相同的原产地政策。不要使用open的完整网址，只需传递相对网址：

xmlhttp.open("GET", "something.php" /* ... */, true);

Answer 3

第一点：您错过了客户端的请求参数。

在查询字符串中发送参数以获取GET请求。

var textvalue = document.getElementById("name").value;
xmlhttp.open("GET","scripts/handle_feedback.php?textbox="+textvalue ,true);

了解更多参考资料read here。

第二点是：

' return '语句与函数/方法一起使用。由于您在此处没有任何功能，因此请使用“回显”或“打印”语句。

<?php
$mytext = $_REQUEST['textbox'];
echo $mytext;
?>

真的很基本的AJAX

3 个答案: