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

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

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

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

這個(gè)缺點(diǎn)是會(huì)刷新頁(yè)面，會(huì)跳轉(zhuǎn)頁(yè)面的。
今天給大家?guī)?lái)的技術(shù)就是ajax提交表單

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

首先我們得要有一個(gè)表單提交頁(yè)面：

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




    login test

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/28258.html

相關(guān)文章

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

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

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

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

Jaden 2019-08-21 12:35 評(píng)論0 收藏0
PHP_Ajax

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

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

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

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

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

youkede 2019-06-27 13:55 評(píng)論0 收藏0