好吧，这很奇怪。下面的代码旨在作为我开始使用 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 自己处理表单，因此不需要默认操作，需要取消它。
有两种方法可以解决这个问题:
从
getFeedback()函数返回false或者...
首先不要使用
提交按钮。如果您将按钮更改为type="button"，则无需担心默认操作。如果没有 javascript，单击该类型的按钮不会执行任何操作，因此您无需担心取消提交。
关于javascript - AJAX/PHP 回显闪烁正确的文本然后将其删除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17418861/