Question

好的，这很奇怪。以下代码旨在为我开始介绍AJAX，我在文本输入中输入一些文本，单击一个提交按钮，然后将AJAX / PHP作为div中的文本回显。当我一次一行地执行这个代码时，我可以看到我的文本出现在我应该的行的div中。但是，当我跨过最后一个花括号时，文字消失了！怎么会这样？？我不明白。有人可以帮忙吗？谢谢！

<!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">
    <!-- 
        window.onload = function ajaxFunction() {
            document.myform.onsubmit = getFeedback;
        }

        function getFeedback() {
            var textvalue = document.getElementById("textfield").value;
            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=textvalue;
                }
            }
            xmlhttp.open("GET","scripts/handle_feedback.php?mytext="+textvalue,true);
            //at this point in the execution, my text is displayed correctly...
            xmlhttp.send();
        } //...but when I step across this line, the text disappears!!!
    //-->
    </script>

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

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

</body>

</html>

Answer 1

问题是您没有取消提交整个页面的默认表单操作。

由于表单上没有action属性，因此默认操作是提交到当前URL - 这实际上只是重新加载当前页面。

您正在通过javascript和ajax自行处理表单，因此您不需要默认操作，需要取消它。

有两种方法可以解决这个问题：

从false函数
返回getFeedback()
...或
首先不要使用submit按钮。如果您将按钮更改为type="button"，则无需担心默认操作。如果没有javascript，点击该类型的按钮什么都不做，所以你不必担心取消提交。

Answer 2

getfeedback()需要结束：

return false;

以防止发生默认表单提交。

Answer 3

将：return false添加到getFeedback函数的末尾

另一种可能的解决方案是使用jquery。

使用jquery，你可以简单地使用

$("#mybutton").click(function(e){
    e.preventDefault()  //stops the form actually submitting
    $('#feedback').load('scripts/handle_feedback.php?mytext='+$("#textfield").val());
});

此外，您还需要为按钮提供ID

<button type="submit" id="mybutton">Submit</button>

AJAX / PHP回显闪烁正确的文本然后删除它

3 个答案: