主页 > 知识库 > 利用ajax提交form表单到数据库详解(无刷新)

利用ajax提交form表单到数据库详解(无刷新)

热门标签:科大讯飞语音识别系统 银行业务 Linux服务器 团购网站 电子围栏 Mysql连接数设置 阿里云 服务器配置

大家应该都知道,在静态页面提交表单到数据库很简单就是单纯的

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源码)

标签:衡水 衢州 萍乡 枣庄 蚌埠 江苏 大理 广元

巨人网络通讯声明:本文标题《利用ajax提交form表单到数据库详解(无刷新)》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266