ajax提交form表单到数据库(无刷新)

前端之家收集整理的这篇文章主要介绍了ajax提交form表单到数据库(无刷新)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在静态页面提交表单到数据库很简单就是单纯的
<form action="test.PHP" method="post">
</form>

这个缺点是会刷新页面,会@R_561_404@面的。
今天给大家带来的技术就是ajax提交表单

优点是不刷新页面,不@R_561_404@面,静默提交的。
至于什么是ajax,自己去百度了解。

首先我们得要有一个表单提交页面

index.html
这个页面由两个部分组成
1、表单控件
2、jQuery+ajax处理脚本
jQuery脚本会获取form表单的数据,通过post的方式提交给api.PHP

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>login test</title>
  5. <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. function insert() {
  9. $.ajax({
  10. type: "POST",//方法
  11. url: "api.PHP",//表单接收url
  12. data: $('#form1').serialize(),success: function () {
  13. //提交成功的提示词或者其他反馈代码
  14. var result=document.getElementById("success");
  15. result.innerHTML="成功!";
  16. },error : function() {
  17. //提交失败的提示词或者其他反馈代码
  18. var result=document.getElementById("success");
  19. result.innerHTML="失败!";
  20. }
  21. });
  22. }
  23. </script>
  24. </head>
  25. <body>
  26. <div id="form-div">
  27. <form id="form1" onsubmit="return false" action="##" method="post">
  28. <p><input name="title" id="title" type="text" value="title"/></p>
  29. <p><input name="url" id="url" type="text" value="url"/></p>
  30. <p><input type="button" value="插入" onclick="insert()"></p>
  31. <p><div id="success"></div></p>
  32. </form>
  33. </div>
  34. </body>
  35. </html>

下面就是表单接收页面
api.PHP
页面其实很简单
就是连接数据库
然后插入数据库
插入数据库的两个值为
title和url

  1. <?PHP
  2. $title = $_POST['title'];
  3. $url = $_POST['url'];
  4. $con = MysqL_connect("localhost","root","root");
  5. if (!$con)
  6. {
  7. die('Could not connect: ' . MysqL_error());
  8. }
  9. MysqL_select_db("test",$con);
  10. MysqL_query("INSERT INTO testdata (title,url)
  11. VALUES ('$title','$url')");
  12.  
  13. MysqL_close($con);
  14. ?>

然后我们需要建立好一个数据库
数据库名为test,表名为testdata

下面是数据库截图

到此,本次案例完成。
当然上面的代码只是简单的实现了ajax提交form表单
但是还有很多细节需要优化,例如表单验证,数据加密等,可以自己拓展学习,完善。
本文由里客云资源站原创:http://www.likeyunba.com转载请附上原链接,加入技术交流群请加微信:likeyunba520

猜你在找的Ajax相关文章