2

好吧，这很奇怪。以下代码旨在作为我开始使用 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>
4

3 回答 3

5

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

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

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

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

  1. false从getFeedback()函数返回

    或者...

  2. 首先不要使用submit按钮。如果您将按钮更改为type="button"，则无需担心默认操作。如果没有 javascript，单击该类型的按钮不会执行任何操作，因此您无需担心取消提交。

于 2013-07-02T06:36:13.070 回答
2

getfeedback()需要结束：

return false;

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

于 2013-07-02T06:36:41.910 回答
0

添加：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>
于 2013-07-02T06:37:44.573 回答