AJAX/PHP echo会闪烁正确的文本，然后将其擦除

AJAX / PHP echo flashes correct text then erases it

本文关键字：文本 然后 擦除 PHP echo 闪烁 AJAX      更新时间：2023-09-26

好吧，这很奇怪。下面的代码是我开始使用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处理表单，因此不需要默认操作，需要取消它。

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

  1. 从getFeedback()功能返回false

    或者。。。

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

getfeedback()需要以结尾

return false;

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

在getFeedback函数的末尾添加：return false

另一种可能的解决方案是使用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>
相关文章：