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

Question

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

好的,这很奇怪.以下代码旨在为我开始介绍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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

jcs*_*nyi 5

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

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

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

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

false从getFeedback()功能返回

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

归档时间：	12 年，12 月前
查看次数：	204 次
最近记录：	12 年，12 月前