ajax提交form表單到數(shù)據(jù)庫(無刷新)

2i18ns 發(fā)布于2019-06-28 18:25 / 2594人閱讀

摘要：在靜態(tài)頁面提交表單到數(shù)據(jù)庫很簡單就是單純的這個缺點(diǎn)是會刷新頁面，會跳轉(zhuǎn)頁面的。當(dāng)然上面的代碼只是簡單的實(shí)現(xiàn)了提交表單但是還有很多細(xì)節(jié)需要優(yōu)化，例如表單驗(yàn)證，數(shù)據(jù)加密等，可以自己拓展學(xué)習(xí)，完善。

在靜態(tài)頁面提交表單到數(shù)據(jù)庫很簡單就是單純的

這個缺點(diǎn)是會刷新頁面，會跳轉(zhuǎn)頁面的。
今天給大家?guī)淼募夹g(shù)就是ajax提交表單

優(yōu)點(diǎn)是不刷新頁面，不跳轉(zhuǎn)頁面，靜默提交的。
至于什么是ajax，自己去百度了解。

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

index.html
這個頁面由兩個部分組成
1、表單控件
2、jQuery+ajax處理腳本
jQuery腳本會獲取form表單的數(shù)據(jù)，通過post的方式提交給api.php




    login test

下面就是表單接收頁面
api.php
該頁面其實(shí)很簡單
就是連接數(shù)據(jù)庫
然后插入數(shù)據(jù)庫
插入數(shù)據(jù)庫的兩個值為
title和url

然后我們需要建立好一個數(shù)據(jù)庫
數(shù)據(jù)庫名為test，表名為testdata

下面是數(shù)據(jù)庫截圖

到此，本次案例完成。
當(dāng)然上面的代碼只是簡單的實(shí)現(xiàn)了ajax提交form表單
但是還有很多細(xì)節(jié)需要優(yōu)化，例如表單驗(yàn)證，數(shù)據(jù)加密等，可以自己拓展學(xué)習(xí)，完善。
本文由里客云資源站原創(chuàng)：http://www.likeyunba.com
轉(zhuǎn)載請附上原鏈接，加入技術(shù)交流群請加微信:likeyunba520

云服務(wù)器 GPU云服務(wù)器 ajax提交form表單 js提交form表單數(shù)據(jù) js獲取form表單提交數(shù)據(jù) js提交本form表單的數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/28258.html

相關(guān)文章

ajax提交form表單到數(shù)據(jù)庫(無刷新)

摘要：在靜態(tài)頁面提交表單到數(shù)據(jù)庫很簡單就是單純的這個缺點(diǎn)是會刷新頁面，會跳轉(zhuǎn)頁面的。當(dāng)然上面的代碼只是簡單的實(shí)現(xiàn)了提交表單但是還有很多細(xì)節(jié)需要優(yōu)化，例如表單驗(yàn)證，數(shù)據(jù)加密等，可以自己拓展學(xué)習(xí)，完善。在靜態(tài)頁面提交表單到數(shù)據(jù)庫很簡單就是單純的這個缺點(diǎn)是會刷新頁面，會跳轉(zhuǎn)頁面的。今天給大家?guī)淼募夹g(shù)就是ajax提交表單優(yōu)點(diǎn)是不刷新頁面，不跳轉(zhuǎn)頁面，靜默提交的。至于什么是ajax，自己去百度...

荊兆峰 2019-08-26 11:45 評論0 收藏0
web端文件上傳功能的思考

摘要：概述文件上傳是一個很常見的需求，實(shí)現(xiàn)文件上傳的技術(shù)也很多。幫助文檔模擬無刷新的文件上傳功能頁面無刷新上傳文件模擬，超簡單為什么上傳文件的表單里要加個屬性接口對象的介紹使用對象涉及文章侵權(quán)，請郵件告知。概述文件上傳是一個很常見的需求，實(shí)現(xiàn)文件上傳的技術(shù)也很多。下面就談?wù)勔恍┏Ｒ姷纳蟼骷夹g(shù)以及它們的優(yōu)劣。傳統(tǒng)表單上傳傳統(tǒng)表單文件上傳估計是運(yùn)用最廣泛和最簡單的技術(shù)了，說它簡單是...

Jaden 2019-08-21 12:35 評論0 收藏0
PHP_Ajax

摘要：簡介業(yè)務(wù)做一個在線投票，給歌手投票。提交到當(dāng)前頁面的中達(dá)到效果。用戶名密碼注冊總結(jié)在不使用對象的情況下，依然可以用來實(shí)現(xiàn)對后臺服務(wù)器的請求，同時不帶來頁面刷新或者跳轉(zhuǎn)。 ajax 簡介業(yè)務(wù)：做一個在線投票，給歌手投票。要求：無刷新，并且不允許使用XMLHttpRequest對象.分析:在XHR對象，沒有流行之前，已經(jīng)有了無刷新這種效果的方法. 從http角度看，可以利用204 No...

MiracleWong 2019-06-27 15:05 評論0 收藏0
【面試篇】JS基礎(chǔ)知識查漏補(bǔ)缺

摘要：因?yàn)樵陧撁婕虞d完成后，引擎維護(hù)著兩個隊列，一個是按頁面順序加載的執(zhí)行隊列，還有一個空閑隊列，使用定時函數(shù)就是將回調(diào)函數(shù)加入到空閑隊列中，故和其他定時器是并發(fā)執(zhí)行的。 1.window.onload和$(document).ready()的區(qū)別： ①執(zhí)行時間：window.onload會在所有元素，包括圖片,引用文件加載完成之后執(zhí)行，而$(document).ready()則會在HTML...

myeveryheart 2019-08-20 16:02 評論0 收藏0
yii2 modal彈窗之ActiveForm ajax表單異步驗(yàn)證

摘要：順便再叨嘮一句，確實(shí)沒啥好說了。后面若是有我再把話改回來。中，默認(rèn)做了客戶端驗(yàn)證，但是表單的提交，卻不是無刷新的。也就是常常看到的表單提交后頁面會刷新。關(guān)于我們做一個說明。作者：白狼出處：http://www.manks.top/yii2_modal_activeform_ajax.html 本文版權(quán)歸作者，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接...

youkede 2019-06-27 13:55 評論0 收藏0