[英]AJAX / PHP echo flashes correct text then erases it
好的,这很奇怪。 以下代码旨在作为一个入门练习,使我从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自行处理表单,因此您不需要默认操作,需要取消它。
有两种方法可以解决此问题:
从getFeedback()
函数返回false
要么...
首先不要使用submit
按钮。 如果您将按钮更改为type="button"
,则无需担心默认操作。 没有javascript,单击该类型的按钮不会执行任何操作,因此您无需担心取消提交。
getfeedback()
必须以以下结尾:
return false;
防止默认表单提交发生。
添加: return false
到getFeedback函数的末尾
另一种可能的解决方案是使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.