表单提交不刷新页面 [英] Form Submission without page refresh
本文介绍了表单提交不刷新页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
也许有人可以帮助我解决这个小问题，我遇到。我试着去不需要刷新页面提交此表。但它会跳过后，直接进入Ajax调用。我想我错过理解preventDefault（）。我在网上搜索，但无法找到我需要的this.Your帮助将大大AP preciated或点到另一个表单提交
HTML
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;冠军＆GT; AJAX |项目＆LT; /标题＆GT;
＆LT;链接HREF =project.css相对=样式/＆GT;
＆LT;脚本SRC =jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =mainCon＆GT;
＆LT; H1＆GT;通讯录和LT; / H1＆GT;
＆LT; DIV ID =form_input＆GT;
＆LT;形式ID =MyForm的方法=邮报行动=addrecord.php＆GT;
＆LT;标签=全名＆GT;名称：＆LT; /标签＆gt;
＆LT;输入类型=文本名称=全名ID =全名/＆GT;＆LT;跨度ID =NameError＆GT; ＆LT; / SPAN＆GT;
＆LT; BR /＆GT;
＆LT;标签=联系号码＆GT;电话号码：其中; /标签＆gt;
＆其中;输入类型=文本的id =联系号码名称=联系号码＆GT;＆所述;跨度的id =PhoneError＆GT;＆所述; /跨度＆GT;
＆LT; BR /＆GT;
＆LT;输入ID =按钮移到类型=提交的onClick =addnumber（）VALUE =添加电话号码/＆GT;
＆LT;输入类型=按钮ID =秀值=结果/＆GT;
＆LT; /形式GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =form_output＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆所述;脚本的src =project.js＆GT;＆所述; /脚本＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
功能addnumber（）{
。VAR全名=的document.getElementById（全名）的价值;
。VAR PHONENUMBER =的document.getElementById（联系号码）的价值;
如果（全名==）{
。的document.getElementById（NameError）的innerHTML =请输入一个valided名称;
}
如果（PHONENUMBER ==）{
。的document.getElementById（PhoneError）的innerHTML =请输入一个valided名称;
}
}
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
jQuery的
$（文件）。就绪（函数（）{
$（＃按钮移到）。点击（函数（）{
$（'＃MyForm的）。递交（函数（五）{
即preventDefault（）;
$阿贾克斯（{
网址：listrecord.php
键入：GET，
数据：数据，
成功：功能（数据）{
$（＃form_output）的HTML（数据）;
}，
错误：函数（jXHR，textStatus，errorThrown）{
警报（errorThrown）;
}
}）; // AJAX获取jQuery的说明书
}）;
}）; //点击效果
}）; //开始jQuery的声明
解决方案
正好赶上提交事件和prevent的，然后做阿贾克斯
$（文件）。就绪（函数（）{
$（'＃MyForm的'）。在（'提交'，函数（E）{
即preventDefault（）;
$阿贾克斯（{
网址：$（本）.attr（'行动'）|| window.location.pathname，
键入：GET，
数据：$（本）.serialize（）
成功：功能（数据）{
$（＃form_output）的HTML（数据）;
}，
错误：函数（jXHR，textStatus，errorThrown）{
警报（errorThrown）;
}
}）;
}）;
}）;
Maybe someone can assist me with this little issue i'm having. Im trying to submit this form without a page refresh. But it will skip the post and go directly to the ajax call. I think i miss understood the preventDefault().I have searched online but unable to locate what i need for this.Your help would greatly appreciated or point to another form submission
html
<!DOCTYPE html>
<html>
<head>
<title>AJAX | Project</title>
<link href="project.css" rel="stylesheet"/>
<script src="jquery.js"></script>
</head>
<body>
<div id="mainCon">
<h1>Contact Book</h1>
<div id="form_input">
<form id="myform" method="post" action="addrecord.php">
<label for="fullname">Name:</label>
<input type="text" name="fullname" id="fullname"/><span id="NameError"> </span>
<br/>
<label for="phonenumber">Phone Number:</label>
<input type="text" id="phonenumber" name="phonenumber"><span id="PhoneError"></span>
<br />
<input id="buttton" type="submit" onClick="addnumber()" value="Add Phone Number"/>
<input type="button" id="show" value="the Results"/>
</form>
</div>
<div id="form_output">
</div>
</div>
<script src="project.js"></script>
<script type="text/javascript">
function addnumber(){
var Fullname = document.getElementById("fullname").value;
var Phonenumber = document.getElementById("phonenumber").value;
if(Fullname == ""){
document.getElementById("NameError").innerHTML = "Please Enter a valided Name";
}
if(Phonenumber == ""){
document.getElementById("PhoneError").innerHTML = "Please Enter a valided Name";
}
}
</script>
</body>
</html>
jquery
$("document").ready(function () {
$("#buttton").click(function () {
$('#myform').submit(function (e) {
e.preventDefault();
$.ajax({
url: "listrecord.php",
type: "GET",
data: "data",
success: function (data) {
$("#form_output").html(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
}); // AJAX Get Jquery statment
});
}); // Click effect
}); //Begin of Jquery Statement
解决方案
Just catch the submit event and prevent that, then do ajax
$(document).ready(function () {
$('#myform').on('submit', function(e) {
e.preventDefault();
$.ajax({
url : $(this).attr('action') || window.location.pathname,
type: "GET",
data: $(this).serialize(),
success: function (data) {
$("#form_output").html(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
这篇关于表单提交不刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
