ajax提交form表單到資料庫實例

在靜態頁面提交表單到資料庫很簡單就是單純的

<form action="test.php" method="post">
</form>

這個缺點是會刷新頁面，會跳到頁面的。今天帶給大家的技術就是ajax提交表單，優點是不刷新頁面，不跳頁，靜默提交的。

首先我們得要有表單提交頁面：

index.html
這個頁面由兩個部分組成
1、表單控制項
2、jQuery+ajax處理腳本
jQuery腳本會取得form表單的數據，透過post的方式提交給api.php

b317222a318de8270818dffaffdd385c
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
    b2386ffb911b14667cb8f0f91ea547a7login test6e916e0f7d1e588d4f442bf645aedb2f
    a71ddd814d1e6bfc91cd420de31796d5
    997f162832870813a4bba3cd209ffad62cacc6d41bbb37262a98f745aa00fbf0
    8019067d09615e43c7904885b5246f0a
        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="失败!";
                }
            });
        }
    2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
e1d846a265bf300ddc7f4a80b95329f3
    d141580f4a41fe1ee835e89737c04401
        e388a4556c0f65e1904146cc1a846bee0581997439755c399a6c92b9221be45d94b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846bee15bdbefafd8a17e62bcaf970c51328ab94b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846bee2cdb61f75629cb4e00b15553abed93b194b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846bee77361903f13dcd26502e2c12536599cd94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3
    f5a47148e367a6035fd7a2faa965022e
94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

下面就是表單接收頁面
api.php
該頁面其實很簡單
就是連接資料庫
然後插入資料庫
插入資料庫的兩個值為
title和url

17154344e9e2a6fb548e020bf5ec4cb0

然後我們需要建立好一個資料庫
資料庫名為test，表名稱為testdata

下面是資料庫截圖

#到此，本案例完成。
當然上面的程式碼只是簡單的實作了ajax提交form表單
但是還有很多細節需要最佳化，例如表單驗證，資料加密等，可以自己拓展學習，完善。

相關推薦：

Ajax提交Form表單頁面仍會刷新j解決方法

js提交form表單,並傳遞參數的實作方法

js 提交form表單和設定form表單請求路徑的實作方法

#

以上是ajax提交form表單到資料庫實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！