利⽤ajax提交form表单到数据库详解（⽆刷新）⼤家应该都知道，在静态页⾯提交表单到数据库很简单就是单纯的
<form action="test.php" method="post">
</form>
这个缺点是会刷新页⾯，会跳转页⾯的。
今天给⼤家带来的技术就是ajax提交表单
优点是不刷新页⾯，不跳转页⾯，静默提交的。
⾄于什么是ajax，⾃⼰去百度了解。
⾸先我们得要有⼀个表单提交页⾯：
index.html
这个页⾯由两个部分组成
1、表单控件
2、jQuery+ajax处理脚本
jQuery脚本会获取form表单的数据，通过post的⽅式提交给api.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="apps.bdimg/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function insert() {
jquery实现ajax$.ajax({
type: "POST",//⽅法
url: "api.php" ,//表单接收url
data: $('#form1').serialize(),
success: function () {
//提交成功的提⽰词或者其他反馈代码
var ElementById("success");
result.innerHTML="成功!";
},
error : function() {
//提交失败的提⽰词或者其他反馈代码
var ElementById("success");
result.innerHTML="失败!";
}
});
}
</script>
</head>
<body>
<div id="form-div">
<form id="form1" onsubmit="return false" action="##" method="post">
<p><input name="title" id="title" type="text" value="title"/></p>
<p><input name="url" id="url" type="text" value="url"/></p>
<p><input type="button" value="插⼊" onclick="insert()"></p>
<p><div id="success"></div></p>
</form>
</div>
</body>
</html>
下⾯就是表单接收页⾯
api.php
该页⾯其实很简单
就是连接数据库
然后插⼊数据库
插⼊数据库的两个值为
title和url
<?php
$title = $_POST['title'];
$url = $_POST['url'];
$con = mysql_connect("localhost","root","root");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("test", $con);
mysql_query("INSERT INTO testdata (title, url)
VALUES ('$title', '$url')");
mysql_close($con);
>
然后我们需要建⽴好⼀个数据库
数据库名为test，表名为testdata
下⾯是数据库截图
到此，本次案例完成。
当然上⾯的代码只是简单的实现了ajax提交form表单
但是还有很多细节需要优化，例如表单验证，数据加密等，可以⾃⼰拓展学习，完善。
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。