简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
首頁 > web前端 > js教程 > 主體

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

小云云
發布： 2018-02-23 15:05:21
原創
5452 人瀏覽過

在靜態頁面提交表單到資料庫很簡單就是單純的
登入後複製

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

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

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




    login test
登入後複製

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

登入後複製

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

下面是資料庫截圖

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

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

相關推薦：

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

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

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

#

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

相關標籤：
ajax form 資料庫
來源：php.cn
上一篇：js控製檔拖曳及取得拖曳內容 下一篇：JS常用設計模式
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用 AJAX、PHP 和伺服器發送事件從 OpenAI 的 API 串流數據 如何使用伺服器傳送事件(SSE)將資料從上述API串流傳輸到使用JavaScript和PHP的瀏覽器客戶端？我已經研究這個問題好幾個小時了，但我似乎無法弄清楚出了什麼問題。作為參考...
來自於 2023-11-11 12:03:23
0
1
497
在使用AJAX請求的回應上進行JSON解析時，出現了未捕獲的語法錯誤：意外的令牌'<'，"<br /> 我正在使用datefrom和dateto製作一個下拉式選單，然後顯示這些日期之間的日期，但它沒有顯示，並且我不斷在控制台中收到此錯誤訊息。 VM652:1UncaughtSynta...
來自於 2023-11-01 10:06:57
0
1
269
不離開頁面執行PHP 我有一個表單-textarea（名為su）和提交按鈕。提交表單後，我需要運行PHP腳本而不刷新/離開頁面“echo”或以某種方式在屏幕上打印返回我很確定這可以通過某種ajax請求來...
來自於 2023-10-23 19:05:06
0
1
285
JavaScript 允許存取 CSS 自訂屬性（也稱為 CSS 變數） 如何使用JavaScript（普通或jQuery）來取得和設定CSS自訂屬性（透過樣式表中的var(…)存取的屬性）？這是我不成功的嘗試：點擊按鈕會更改通常的font-weight...
來自於 2023-10-20 22:42:04
0
2
244
Vue 2 - 關於改變 props 的警告 我開始了https://laracasts.com/series/learning-vue-step-by-step系列。我因以下錯誤而停止了Vue、Laravel和AJAX課程：...
來自於 2023-10-13 10:49:44
0
2
217
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！