利用ajax提交form表单到数据库详解(无刷新)
更新时间：2018年02月19日 09:26:01 作者：不懂事先生
这篇文章主要给大家介绍了关于利用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="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function insert() {
$.ajax({
type: "POST",//方法
url: "api.php" ,//表单接收url
data: $('#form1').serialize(),
success: function () {
//提交成功的提示词或者其他反馈代码
var result=document.getElementById("success");
result.innerHTML="成功!";
},
error : function() {
//提交失败的提示词或者其他反馈代码
var result=document.getElementById("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表单
但是还有很多细节需要优化，例如表单验证，数据加密等，可以自己拓展学习，完善。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要为大家详细介绍了Ajax+PHP简单数据交互,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章为大家推荐了一个非常简单的Ajax请求实例，可以在不重载页面的情况与 Web 服务器交换数据，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了深入浅析Jsonp解决ajax跨域问题的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-05-05
Ajax获取php返回json数据动态生成select下拉框的实例
今天小编就为大家分享一篇Ajax获取php返回json数据动态生成select下拉框的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
AJAXRequest v0.2...2006-12-12
这篇文章主要介绍了Ajax实现无刷新分页实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
这篇文章主要为大家详细介绍了Ajax动态加载数据的小例子，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
滚动下拉到页面底部加载数据是很多瀑布流网站的做法，那来看看配合jsonp是如何实现的吧，小菜总结记录之用特在此与大家一起分享，感兴趣的朋友可以参考下哈2013-05-05
在项目开发过程中，我们经常会遇到同一个域名下不同项目之间通过Ajax相互调用数据，这样问题就来了，如何通过Ajax实现跨域呢？下面脚本之家小编给大家带来了Ajax实现跨域访问最新解决方案，感兴趣的朋友一起看看吧2018-07-07
这篇文章主要为大家详细介绍了Ajax与mysql数据交互，实现留言板功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
最新评论