Ajax提交form表单到写入数据库实例

心已赠人 2023-07-18 12:46 1阅读 0赞

静态页面提交表单到数据库很简单就是单纯的

这个缺点是会刷新页面，会跳转页面的。今天给大家带来的技术就是**Ajax提交form表单到写入数据库实例**，优点是不刷新页面，不跳转页面，静默提交到数据库的。

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

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>
    
    <p id="form-p">
    
        <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><p id="success"></p></p>
    
        </form>
    
    </p>
    
    </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);
    
    ?>

然后我们需要建立好一个数据库，参考：[必学智库][Link 1]  
数据库名为test，表名为testdata

下面是数据库截图

![Ajax提交form表单到写入数据库实例][Ajax_form] Ajax提交form表单到写入数据库实例

到此，本次案例完成。  
当然上面的代码只是简单的实现了ajax提交form表单  
但是还有很多细节需要优化，例如表单验证，数据加密等，可以自己拓展学习，完善。部分参考资料来自：[软盟网][Link 2]

[Link 1]: http://www.ibixue.com
[Ajax_form]: /images/20230528/4e20157d24fa48cd98bdff9e093cb099.png
[Link 2]: http://www.ruanally.com