大家应该都知道，在静态页面提交表单到数据库很简单就是单纯的
<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表单
但是还有很多细节需要优化，例如表单验证，数据加密等，可以自己拓展学习，完善。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
- jquery实现ajax提交form表单的方法总结
- jQuery实现form表单基于ajax无刷新提交方法详解
- jquery序列化form表单使用ajax提交后处理返回的json数据
- jquery的ajax提交form表单的两种方法小结(推荐)
- Jquery基于Ajax方法自定义无刷新提交表单Form实例
- AJAX PHP无刷新form表单提交的简单实现(推荐)
- 使用Ajax方法实现Form表单的提交及注意事项
- Ajax提交Form表单及文件上传的实例代码
- jQuery ajax提交Form表单实例(附demo源码)
