找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[复制链接]
查看: 1498|回复: 3
最佳答案
0 

51

主题

181

帖子

5105

积分

S1

积分
5105
 楼主| 发表于 2018-2-16 20:22:43 | 显示全部楼层 |阅读模式
本帖最后由 里客云网络科技 于 2018-2-16 20:26 编辑

在静态页面提交表单到数据库很简单就是单纯的
<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" 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="插入"></p>
        <p><div id="success"></div></p>
    </form>
</div>
</body>
</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. mysql_close($con);
  13. ?>
复制代码


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

下面是数据库截图

2345截图20180216202640.png

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

回复

使用道具 举报

最佳答案
0 

0

主题

60

帖子

460

积分

新人求带

积分
460
发表于 2018-2-22 09:58:04 | 显示全部楼层
谢谢分享 谢谢分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1365

帖子

7922

积分

S1

积分
7922
QQ
发表于 2018-2-22 11:47:56 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

51

帖子

203

积分

新人求带

积分
203
发表于 2018-2-25 18:57:56 | 显示全部楼层
很好以后用的到
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com