0

我刚开始使用 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>

处理反馈.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;
?>
4

3 回答 3

2

应该echo不是return。return在函数中用于返回数据。

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

您还必须将参数发送到 php 文件

xmlhttp.open("GET","scripts/handle_feedback.php?textbox=your_value",true);
于 2013-07-02T04:23:20.493 回答
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

另一件可能让您受益的事情是相同的原产地政策。而不是使用完整的 URL open，只需传递一个相对 URL：

xmlhttp.open("GET", "something.php" /* ... */, true);
于 2013-07-02T04:37:22.233 回答
1

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

在 GET 请求的查询字符串中发送参数。

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

如需更多参考，请阅读此处。

第二点是：

' return ' 语句与函数/方法一起使用。由于您在这里没有任何功能，因此请使用 ' echo ' 或 ' print ' 语句。

<?php
$mytext = $_REQUEST['textbox'];
echo $mytext;
?>
于 2013-07-02T04:38:00.670 回答