没有页面刷新的表单提交[重复]
Posted
技术标签:
【中文标题】没有页面刷新的表单提交[重复]【英文标题】：Form Submission without page refresh [duplicate] 【发布时间】：2014-06-23 19:53:29 【问题描述】：也许有人可以帮助我解决我遇到的这个小问题。我正在尝试在不刷新页面的情况下提交此表单。但它会跳过帖子并直接进入ajax调用。我想我错过了preventDefault（）。我在网上搜索过，但找不到我需要的东西。非常感谢您的帮助或指向其他表单提交。
以下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
【问题讨论】：
你不需要 click() 和 submit() 似乎<input type="submit" action="xxx"/> 将重定向网址，
尝试数据：$('#myform').serialize(),
你可以使用jquery插件，访问here
【参考方案1】：
<!-- index.php -->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form id="myForm">
<input type="text" name="fname" id="fname"/>
<input type="submit" name="click" value="button" />
</form>
<script>
$(document).ready(function()
$(function()
$("#myForm").submit(function(event)
event.preventDefault();
$.ajax(
method: 'POST',
url: 'submit.php',
dataType: "json",
contentType: "application/json",
data : $('#myForm').serialize(),
success: function(data)
alert(data);
,
error: function(xhr, desc, err)
console.log(err);
);
);
);
);
</script>
</body>
</html>
<!-- submit.php -->
<?php
$value ="call";
header('Content-Type: application/json');
echo json_encode($value);
?>
【讨论】：
【参考方案2】：问题是您的表单使用“post”方法提交的“POST”方法，而在 AJAX 中您使用的是“GET”。
【讨论】：
【参考方案3】：<script type="text/javascript">
var frm = $('#myform');
frm.submit(function (ev)
$.ajax(
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data)
alert('ok');
);
ev.preventDefault();
);
</script>
<form id="myform" action="/your_url" method="post">
...
</form>
【讨论】：
【参考方案4】：只需捕获提交事件并阻止它，然后执行 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);
);
);
);
【讨论】：
Adeneo，当我将网址更改为 $(this).attr('action') 时，它会发布但会重定向到“成功”帖子。如何调用第二个 php 文件来显示记录？ 不确定我明白你的意思，成功回调是你获取数据的地方？ 使用包含 html 的表单。表单以上是关于没有页面刷新的表单提交[重复]的主要内容，如果未能解决你的问题，请参考以下文章
在用php做小页面,有个表单.每次刷新页面时老是提示不要重复提交表单?怎样去掉这个提示啊