Ajax新增資料即時顯示篇

阿新 • • 發佈：2019-02-19

作者:康董我很開心您來閱讀我寫的關於ajax的例項教程,無論您是第一次還是老朋友.我將在這裡獻上我至今所學,並毫不吝嗇．
經過前3篇的ajax例項教程的學習，我想各位已經能夠使用ajax技術進行簡單的資料讀取工作．
今天我們要學習的內容是：使用ajax向服務端的資料庫新增資料，然後在網頁不重新整理情況下即時顯示被新增的資料．需要說明的是．本次ajax例項教程與前3篇有2點大不同之處．
1：我們要對資料庫進行操作．2：更換請求的服務端網頁．不再使用Web_ajax.Asp檔案．新的請求網頁是：Add_Data.Asp．看字尾大家就應該能明白．我在服務端採用的技術是Asp．都說Asp過時了．可他的簡單易用，易學深深地吸引著我！當然也你可以使用php, .net,或jsp輕鬆的模擬該Asp檔案的原始碼．我會在該次教程最後提供該Asp的原始碼給大家！
下面我們先來看下前端的程式碼．和本次的ajax例項效果演示
<html> <head> <title>ajax無重新整理新增資料</title> </head> <body> 輸入內容：<input id="str" type="input" /> <input type="button" value="確定新增" onclick="add_Post()"/> <span id="msg" style="color:red"></span> <script type="text/javascript"> function ajax_xmlhttp(){ //在IE中建立xmlhttpRequest,適用於IE5.0以上所有版本 var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP"); for(var i=0; i<msXmlhttp.length; i++){ try { _xmlhttp=new ActiveXObject(msXmlhttp[i]); } catch(e) { _xmlhttp=null; } } //迴圈建立基於IE瀏覽器的xmlhttp.結束 //如果非IE瀏覽器，則建立基於FireFox等瀏覽器的xmlhttpRequest if(!_xmlhttp && typeof XMLHttpRequest != "undefined") { _xmlhttp=new XMLHttpRequest(); } return _xmlhttp; } //讀取資料函式 function Post(){ var ajax = ajax_xmlhttp(); //將xmlhttprequest物件賦值給一個變數． ajax.open("post","add_data.asp?action=read",true);//設定請求方式，請求檔案，非同步請求 ajax.onreadystatechange = function(){//你也可以這裡指定一個已經寫好的函式名稱 if(ajax.readyState==4){//資料返回成功 if(ajax.status==200){//http請求狀態碼返回ok var xmlData = ajax.responseXML; var list = xmlData.getElementsByTagName("list");//獲取所有的list標籤 if(list.length!=0){ var t = document.createElement("table"); t.setAttribute("border","1"); t.setAttribute("id","abc"); //為表格設定一個id屬性，值為abc var thead = t.createTHead(); var _tr = thead.insertRow(0) //為thead建立一行 var _td = _tr.insertCell(0); _td.innerHTML = "內容"; document.body.appendChild(t); for(var i=0;i<list[0].childNodes.length;i++){ //遍歷所有的list,有幾個list的便為表格新增幾行． var tr = t.insertRow(0); var td = tr.insertCell(0); td.innerHTML = list[0].childNodes[i].firstChild.nodeValue; } } } } } ajax.send(null); } //提交資料函式 function add_Post(){ var msgaes = document.getElementById("msg");//用來顯示提示資訊 var str = document.getElementById("str");//接收輸入的內容 if(str.value.length == 0){ msgaes.innerHTML = "不接受空內容！" return; } msgaes.innerHTML = "正在提交"; var ajax = ajax_xmlhttp();//定義xmlhttprequest物件 ajax.open("post","add_data.asp?action=add",true);//設定請求方式，請求檔案，非同步請求 var param = "str="+escape(str.value);//獲取你輸入的內容,注意這裡的str,服務端將接收str中的值 ajax.onreadystatechange = function(){ if(ajax.readyState==4){ if(ajax.status==200){ var msg = ajax.responseXML.getElementsByTagName("msg");//獲取服務端返回的msg標籤 if(msg[0].firstChild.nodeValue == 0){ var t = document.getElementById("abc"); var tr = t.insertRow(0); var td = tr.insertCell(); td.innerHTML = str.value; str.value = ""; msgaes.innerHTML = "新增完成"; } else if(msg[0].firstChild.nodeValue == 3){ msgaes.innerHTML = "不接受空的內容"; return; } else if(msg[0].firstChild.nodeValue == 1){ msgaes.innerHTML = "服務端發生了錯誤，資料新增失敗!"; return; } else{ msgaes.innerHTML = "該例項供學習使用．請不要惡意輸入．謝謝！"; } } } } ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//注意向服務端提交資料，必須設定該頭．否則服務端會接收不到 ajax.send(param);//注意send方法向服務端提交param變數中的內容． } window.load = Post();//只有在開啟網頁或重新整理網頁以後才會執行讀取資料函式 </script> </body> </html>

檢視例項效果
點選上面的檢視例項效果，就是我們今天要學習的目的．上面的程式碼只是前端的html程式碼．在程式碼裡有3個自定義函式．

ajax_xmlhttp();該函式我們在前面的教程已經講過，是用來建立一個可用性的XMLHTTPRequest物件，如果你還不瞭解，請參閱：ajax開始準備篇
Post();該函式還是用來讀取資料．我們在本章教程中不再解釋ajax是如何讀取資料的．你可以參閱：ajax初試讀取資料篇與ajax讀取資料到表格不過跟前２篇不同的是．該Post函式不是在點選按扭時被觸發．而是在你第一次開啟網頁或重新整理頁面的時候才會執行該函式．其目的是用來讀取資料庫中已存在的資料．在資料新增成功以後．並沒有執行該函式．其中的祕密下面的解釋中我會告訴你！另外你再看一下open方法中的設定．我們在請求的網址後面多了一個action=read,這個大家應該用過．在url後面的引數，服務端可以接收該引數．在Asp中使用Request.QueryString來接收．Php中使用$get方法來接收．我們設定這個url的引數目的是想要告訴伺服器．我們要執行什麼動作．在Add_Data.Asp網頁中有兩個自定義過程，一個用來讀取資料，一個用來新增資料．這個action=read引數服務端接收以後．經過判斷會執行讀取資料的過程！

我們重點來講一下這個add_Post函式．函式剛開始便使用getElementById方法在網頁查詢msg與str．msg是用來顯示一些當前的操作資訊．str是用來獲取你輸入的內容．然後判斷你是否在str的文字框中輸入了內容．如果為空則退出函式．
再看open方法的設定．請求的網頁url後面的引數是action=add，服務端網頁接收action這個引數．經過判斷如果值是add，則執行插入資料的過程．
var param = "str="+escape(str.value);將str文字框的內容等於一個str，然後一併賦值給param變數．待會發送請求時．send會提交這個param變數中的內容．escape的意思是對 String 物件編碼以便它們能在所有計算機上可讀，就是解碼你輸入的內容．經過測試有時候可以忽略，但有時候會出現亂碼．為保險起見我們還是使用escape
我們先不講readystatechange指定的程式．看下面：
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");這行的意思是．我要向服務端提交表單內容．當你的請求方式是post，並且有資料向服務端提交時．必須設定setRequestHeader．如果你使用的請求方式是get或者沒有資料要提交則可以忽略該句．
ajax.send(param);傳送請求．並在send的引數裡指定要提交param變數中的內容．你可以alert一下param，會彈出str="你輸入的內容"，然後我們在服務端的網頁接收這個str，便可以獲取str中的內容了．也就是你在文字框中輸入的．講到這裡應該是時候看一下這個被請求的服務端網頁了．看看他到底在服務端幹了些什麼．請看：

<% '出自：http://Www.Web666.Net '作者：康董 '如需轉載請務必保留以上資訊 '定義一個變數，來儲存xml資料 xml="<?xml version='1.0' encoding='gb2312'?><body>" action=Request.QueryString("action") '使用get方式接受一個action來判斷客戶端想要執行什麼操作 Select case action case "read" '如果為read則執行讀取資料的操作 Call Read case "add" '如果為add則執行新增資料的操作 Call Add_Data case else xml = xml&"<msg>請求引數錯誤，請不要試圖非法操作！</msg>" End Select xml=xml&"</body>" Response.Clear Response.ContentType="text/xml" Response.CharSet="gb2312" Response.write xml '注意這句啊．上面的那些判斷執行過程．其目的就是獲取一個新的xml變數內容．然後在這裡輸出這個xml Response.End Sub Read '定義一個讀取資料的過程 Call OpenConn '開啟資料庫連結 Sql = "Select * From web_table" '開啟資料庫中名字為web_table的表 Set Rs = Conn.Execute(Sql) '執行Sql語句，並將sql的索引賦值給rs變數 xml = xml&"<list>" '沒開始讀取之前先建立一個list標籤．將所有資料都包含在該標籤下 While Not Rs.Eof '如果表中有資料．則一直迴圈讀取 xml = xml&"<li>"&Rs("web")&"</li>" Rs.MoveNext '執行下一條資料的讀取 Wend '如果資料庫中沒有了資料．則結束迴圈 xml = xml&"</list>" '資料讀完閉合list標籤 Close_Conn '關閉資料庫連結 End Sub Sub Add_Data '新增資料過程 On Error Resume Next '如果發生錯誤繼續執行程式 OpenConn '開啟資料庫連結 str = Trim(Request.Form("str")) '接收客戶端傳過來的str內容 If str = "" Then xml = xml&"<msg>3</msg>" '如果提交的內容為空．返回3 Exit Sub '退出過程 End If Sql = "Insert Into web_table (web) values ('"&str&"')" Conn.Execute(Sql) '執行新增資料 If Err.Number = 0 Then '判斷是否有錯誤發生， xml = xml&"<msg>0</msg>" '如果沒有錯誤發生，則證明資料已經成功．返回0 Exit Sub Else xml = xml&"<msg>1</msg>" '如果發生錯誤．則證明有錯誤發生．資料很可能新增失敗 Exit Sub End If End Sub %>
上面是你使用ajax請求的服務端網頁：Add_Data.Asp的原始碼．現在使用Asp的應該不多了吧？但我依然痴情於她．無論你用的服務端技術是Php，.Net，或者Jsp等．經過我的解釋你應該很容易的會模擬出這個原始碼的功能．
1：include file="Conn.asp"在Asp裡的作用是引入一個網頁．Conn.asp是我的資料庫連結檔案．為安全起見．我就不暴露資料庫名稱了．你自己建個庫．隨便起個名進行測試吧．
2：定義一個名字為xml變數．將xml格式的資料儲存在這個變數中．使用Response.Write輸出xml變數中的內容．
3：接收你在前端url傳過來的action引數．並判斷action的值．Select case不用解釋了吧．多支判斷．如果action的值是read,則執行Read過程．如果是add則執行Add_Data過程．如果兩者都不是則證明不是通過正常渠道進行請求的．向xml變數中再增加一個msg標籤．輸出以後會給出顯示的內容
4：Response.Clear清除快取．
5：Response.ContentType="text/xml"定義輸出的文字格式．xml型別
6：Response.CharSet="gb2312"輸出編碼，中文編碼．
7：Response.write xml向客戶端輸出xml變數中的資料．該變數儲存的是xml格式的資料．
8：Response.End停止一切輸出．
9：定義一個 Read　過程．用來讀取資料庫test_table表中的web欄位內的資料．開啟資料庫，sql語句．執行sql．開始讀取！這些知識我就不講了．如果你還不會．我想你應該去學習一下操作資料庫的知識！我重點講一下該Read過程的意義．在讀取資料之前先為xml變數中增加了一個list的標籤．然後將所有的資料都讀取到list標籤內，每條資料又被包含在了一個li標籤內．數取讀取完畢．閉合list標籤．我想說的是，這個Read過程並沒有向客戶端輸出任何內容．他的工作就是將資料庫中的內容以xml的格式讀取到那個xml變數中．當客戶端action=add的時候．執行Read過程．Read過程給出一個新的xml變數．Response.Write xml輸出這個變數到客戶端，客戶端接受到這個xml，我們在前端使用responseXML接收這個xml．然後顯示！明白嗎？不明白加我Q：30458885
10：我們再來講Add_Data這個過程．Add_Data的意義和Read是相同的．都是在執行一系列操作以後向xml變數中賦值．Add_Data的作用是接受客戶端傳送過來的資料．並將資料寫到資料庫內．你仔細看下Add_Data中的程式邏輯．首先他會判斷你提交的資料是否為空．如果為空向xml變數中增加一個msg標籤．內容是3．然後退出Add_Data．如果資料不為空．則向資料庫寫入該資料．然後判斷是否有錯誤發生．如果沒有錯誤也向xml變數中增加一個msg標籤，內容是0．代表在寫入資料時一切正常．資料被成功新增．相反Err.Number不等於0．則代表在寫入資料時發生了錯誤．資料沒有被成功新增．這時也會向xml變數中新增一個msg標籤．內容為1．這三種情況無論那種發生都會在新增msg標籤以後立即退出Add_Data．所以只有一個msg標籤會被寫入．那麼我們馬上回來客戶端Add_Post中函式正是接收了這個msg標籤以後．根據msg的內容來判斷服務端究竟發生了什麼事！如果msg的內容為0，證明服務端一切正常，沒有錯誤發生．資料已被新增到資料庫．我們直接使用Dom將str中的內容寫入到了表格內．並沒有執行讀取資料的Post函式．如果msg內容為3，證明你輸入了空的內容．如果msg內容為1，證明服務端有錯誤發生．資料寫入失敗！
怎麼樣你學會使用ajax技術向資料庫新增資料了嗎？不要說No!拜託我講的很辛苦．．．．．．

Ajax新增資料即時顯示篇

Ajax新增資料即時顯示篇

通過ajax得到資料，顯示http://localhost:8081/專案名/[object%20Object] 404 (Not Found) 錯誤。

Servlet+AJAX實現資料處理顯示

jquery中使用ajax接收資料並且顯示

AJAX獲取資料然後顯示在頁面

RecyclerView 新增資料不顯示的問題

Vue使用jQuery ajax載入資料頁面無顯示解決方法

ajax從後臺請求的資料在顯示時一閃而過的原因（submit）

ajax請求資料的時候顯示正在載入的圖片

laravel Ajax 提交資料需要驗證csrf 新增一下程式碼

angular-------------模板資料顯示篇

在 ajax 裡遍歷顯示資料到頁面

利用ajax動態新增資料時候出現的累加問題

Ajax動態為下拉列表新增資料

ajax非同步獲取資料後動態向表格中新增資料(行)

python中plot實現即時資料動態顯示方法

html資料動態顯示、利用ajax動態顯示mysql的資料

ajax提交資料（修改、新增）到資料庫並重新整理資料

Ajax 非同步或取後臺資料json顯示到頁面

Jquery+Ajax實現Select動態新增資料

Ajax新增資料即時顯示篇

相關推薦