在互联网上日益增加和优化Web体验，我们致力于通过提供更好的用户界面，以改善我们的Web应用程序，并减少网络流量。在这种情况下，如果我们不重新加载页面并提交我们的网络信息形式，这非常有用。它降低了网络负载重新加载整个网页。 本文将帮助你创建一个web形式将提交而不需要刷新页面并做后台处理并返回值页面。
1.主网页
使用下面的内容在你的网站创建
index.html页面。这是主要的HTML表单，将显示网站页面上。你可以简单的形式集成到任何网站页面。
<html>
<title>Submit Form without Page Refresh - PHP/jQuery - youcl.com</title>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/submit.js"></script>
</head>
<body>
<form id="myForm" method="post">
Name: <input name="name" id="name" type="text" /><br />
Email: <input name="email" id="email" type="text" /><br />
Phone No:<input name="phone" id="phone" type="text" /><br />
Gender: <input name="gender" type="radio" value="male">Male
<input name="gender" type="radio" value="female">Female<br />
<input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
</form>
<br/>
Your data will display below..... <br />
==============================<br />
<div id="results">
<!-- All data will display here -->
</div>
</body>
</html>
2.创建JavaScript
现在创建使用下列内容的
js目录中的名称
submit.js一个JavaScript页面。 您可以通过添加优化这段JavaScript使用
jQuery的验证。
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var gender = $("input[type=radio]:checked").val();
$.post("submit.php", { name: name, email: email, phone: phone, gender: gender },
function(data) {
$('#results').html(data);
$('#myForm')[0].reset();
});
}
3.创建PHP脚本
现在创建一个PHP脚本命名
submit.php。这个脚本会做你的所有备份操作。当我们提交Web表单，该脚本会从POST所有参数。您可以根据您的要求定制此脚本保存一样在数据库中的值，电子邮件记录为Admin等。
<?php
echo $_POST['name'] ."<br />";
echo $_POST['email'] ."<br />";
echo $_POST['phone'] ."<br />";
echo $_POST['gender'] ."<br />";
echo "==============================<br />";
echo "All Data Submitted Successfully!";
?>
4.测试
现在，在网络浏览器访问
index.html页面并测试这个例子。
