这篇文章主要给大家介绍了关于利用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表单

但是还有很多细节需要优化,例如表单验证,数据加密等,可以自己拓展学习,完善。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对爱安网的支持。

最新资讯
苹果发布《2018环境责任报告》:增效减排持续改进

苹果发布《2018环境责

最近,苹果抵达了一个重要的里程碑和长期环境目标,即全球
苹果安保升级:以后可能没有新园区无人机航拍视频

苹果安保升级:以后可能

苹果园区的安保状况已经变得更好,并且一旦无人机出现在
台积电预警手机市场 分析师直指苹果iPhone需求疑虑

台积电预警手机市场

全球最大晶圆代工厂商及主要的苹果供应商台积电,将其全
黄章“垂帘听政”:慈禧式领导者的局限

黄章“垂帘听政”:慈禧

魅族的实权仍然牢牢地把持在黄章手中,白永祥等一线高管
阿里宣布收购中天微,芯片战略布局初成规模

阿里宣布收购中天微,芯

这笔收购向我们释放出一个明显的信号——阿里果然兑现
探秘区块链投资社群:明知有猫腻却不甘收手

探秘区块链投资社群:明

区块链社群在一个愿打一个愿挨的共识下,形成了这样一种
最新文章
利用ajax提交form表单到数据库详解(无刷新)

利用ajax提交form表单

这篇文章主要给大家介绍了关于利用ajax提交form表单到
ajax动态赋值echarts的实例(饼图和柱形图)

ajax动态赋值echarts

下面小编就为大家分享一篇ajax动态赋值echarts的实例(
纯javascript的ajax实现php异步提交表单的简单实例

纯javascript的ajax实

下面小编就为大家带来一篇纯javascript的ajax实现php
深入浅析Jsonp解决ajax跨域问题

深入浅析Jsonp解决aja

这篇文章主要介绍了深入浅析Jsonp解决ajax跨域问题的
Ajax跨域问题的解决办法汇总(推荐)

Ajax跨域问题的解决办

本文给大家分享多种方法解决Ajax跨域问题,非常不错具有
完美解决ajax访问遇到Session失效的问题

完美解决ajax访问遇到

下面小编就为大家带来一篇完美解决ajax访问遇到Sessio