Javascript Ajax没有异步加载。提交表单时刷新页面
我一直在尝试学习ajax,从我所看到的情况来看,我的代码是正确的,但是当它返回json字符串时,它总是刷新页面。任何帮助都将不胜感激Javascript Ajax没有异步加载。提交表单时刷新页面,javascript,php,ajax,forms,Javascript,Php,Ajax,Forms,我一直在尝试学习ajax,从我所看到的情况来看,我的代码是正确的,但是当它返回json字符串时,它总是刷新页面。任何帮助都将不胜感激 <script> // Get XML HTTP Type function get_XmlHttp() { var xmlHttp = null; if(window.XMLHttpRequest) { xmlHttp = new XMLHttpR
<script>
// Get XML HTTP Type
function get_XmlHttp() {
var xmlHttp = null;
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function ajaxSuccess () {
alert(this.responseText);
}
function ajaxrequest(oFormElement) {
//Get The Correct XMLHTTP Object
var request = new XMLHttpRequest();
request.open(oFormElement.method, oFormElement.action, true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(new FormData(oFormElement));
return false;
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
alert("done");
document.getElementById('comment_form').innerHTML = request.responseText;
}
}
}
</script>
<form action="<?php echo $add_comment; ?>" method="post" enctype="multipart/form-data" id="comment_form" onsubmit="ajaxrequest(this);">
<input name="user_id" type="hidden" value="<?php echo $user_id; ?>">
<input name="user_message_id" type="hidden" value="<?php echo $user_message_id; ?>">
<textarea id="new_comment" name="new_comment" cols="100" rows="5"></textarea>
<input type="submit" value="post request"/>
</form>
//获取XML HTTP类型
函数get_XmlHttp(){
var xmlHttp=null;
if(window.XMLHttpRequest){
xmlHttp=新的XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttp=新的ActiveXObject(“Microsoft.xmlHttp”);
}
返回xmlHttp;
}
函数ajaxSuccess(){
警报(this.responseText);
}
函数ajaxrequest(OfFormElement){
//获取正确的XMLHTTP对象
var request=new XMLHttpRequest();
打开(oFormElement.method,oFormElement.action,true);
setRequestHeader(“内容类型”、“应用程序/x-www-form-urlencoded”);
发送(新表单数据(表单元素));
返回false;
request.onreadystatechange=函数(){
if(request.readyState==4&&request.status==200){
警惕(“完成”);
document.getElementById('comment_form')。innerHTML=request.responseText;
}
}
}
使用Jquery库,但如果您想构建自己的脚本。查阅w3c文档正如Pointy所指出的,您可能希望防止触发submit按钮的默认单击事件
submitForm( event ) {
event.preventDefault();
}
您必须阻止事件发生。javascript中有一个常用函数:
e.preventDefault; // e is the event that you need to pass to your function.
或更改
到
接下来的情况是,您的表单只会由javascript处理,并且页面不会因为表单提交而重新加载。
只要自己修改这个方法,它就会解决您的问题。我可能会失明,但是submitForm()
函数在哪里?我实际上用了两种方法来尝试它,一种是使用提交按钮,另一种是使用链接“”问题是,您的函数没有阻止表单提交按钮的默认操作。我正在尝试构建一个与我们正在使用的注释系统完全相同的注释系统。我将如何阻止默认操作?我所拥有的是他们在W3schools.com上提出的建议的变体。我遇到的问题是,因为我的表单刷新了页面。我不知道如何防止它这样做。不,我向你展示的是opencart内部使用的TPL文件的一部分。贾斯汀,你太棒了,这正是问题所在。然而,一个错误显示在我想要结果的地方。它正在处理表单提交,现在我得到了错误“get to undefined not supported”。它仍然在拉入我的表单值吗?我发现它非常简单。我的原始代码只是在表单的onsubmit属性中缺少了“return false;”。谢谢大家的帮助!
<input type="button" onclick="ajaxrequest(this);" value="post request"/>