好,这很奇怪。以下代码旨在作为一个入门练习,使我从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,单击该按钮类型将无法执行任何操作,因此您不必担心取消提交。