好,这很奇怪。以下代码旨在作为一个入门练习,使我从AJAX开始,在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>

最佳答案

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

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

您可以通过javascript和ajax自己处理表单,因此不需要默认操作,而需要取消它。

有两种方法可以解决此问题:

  • false函数返回getFeedback()
    或者...
  • 首先不要使用submit按钮。如果将按钮更改为type="button",则无需担心默认操作。没有javascript,单击该按钮类型将无法执行任何操作,因此您不必担心取消提交。
  • 08-28 17:17
    查看更多