ajax添加數(shù)據(jù)后如何在網(wǎng)頁顯示
下面通過圖文并茂的方式展示給大家,具體內(nèi)容如下所述:
今天下午做一個(gè)項(xiàng)目小練習(xí).需要把查詢?nèi)罩镜膬?nèi)容顯示到網(wǎng)頁上來.一開始陷入了一個(gè)誤區(qū).
一直以來我這個(gè)小項(xiàng)目需要訪問ashx來生成html的代碼.后臺(tái)用的Razor模板引擎.
剛開始顯示用戶列表時(shí).因?yàn)槭秋@示到了另一個(gè)界面(其實(shí)就是另一個(gè)網(wǎng)頁).razor直接輸出沒什么問題
但是下面這個(gè)需要顯示到當(dāng)前頁面的下面
當(dāng)我ajax提交后.razor模板引擎拼接后的代碼.確是返回到了ajax中的data中
不能像最上面那張圖那樣顯示了.我的想法破滅了.
于是乎,又開始想辦法.既然需要返回到當(dāng)前頁面.那么直接表單提交也許可以.但是表單提交需要刷新.還要改好多代碼.不太喜歡.就放棄了.感覺還是有辦法的.
從新建個(gè)頁面.但是那樣的話上面的那些按鈕什么的就沒了,不美觀.這個(gè)新建的頁面放到這個(gè)頁面的下面.怎么放?用ifarme.好像很麻煩.
百度之...
不要返回網(wǎng)頁源代碼.返回?cái)?shù)據(jù).然后寫for循環(huán)綁定.
不過還是不太喜歡.因?yàn)槲也幌敕艞塺azor.
于是乎...想到了innerHTML
直接改變?cè)氐膆tml代碼,用razor替換代碼.替換好后.傳給ajax的data.然后用innerHTML一賦值.就OK了
需要替換的html代碼
然后頁面里寫一個(gè)<table id="tb"></table>.用dom獲取此元素.var tb = document.getElementById("tb");然后tb.innerHTML = 上面的那部分html代碼(用ajax返回);
于是乎就ok.是不是有人覺的這樣麻煩.但是我就是想要用razor.........
最后,效果圖
以上所述是針對(duì)ajax的查詢數(shù)據(jù)在網(wǎng)頁顯示的全部?jī)?nèi)容,希望對(duì)大家有所幫助。
相關(guān)文章
ASP.NET 定制簡(jiǎn)單的錯(cuò)誤處理頁面實(shí)現(xiàn)代碼
通常web應(yīng)用程序在發(fā)布后,為了給用戶一個(gè)友好界面和使用體驗(yàn),都會(huì)在錯(cuò)誤發(fā)生時(shí)跳轉(zhuǎn)至一個(gè)自定義的錯(cuò)誤頁面,而不是asp.net向用戶暴露出來的詳細(xì)的異常列表。2010-01-01.NET+PostgreSQL實(shí)踐與避坑指南(推薦)
這篇文章主要介紹了.NET+PostgreSQL實(shí)踐與避坑指南,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01VS2005打開VS2008項(xiàng)目的2種方法(vs2005怎么打開2008)
vs2008支持.net3.5,而vs2005支持.net2.0,所以使用vs2005打開vs2008的項(xiàng)目,要確定你的項(xiàng)目是.net2.0的,下面介紹二種VS2005打開VS2008項(xiàng)目的方法2014-01-01Asp.Net 通用數(shù)據(jù)操作類 (附通用數(shù)據(jù)基類)
以前經(jīng)常用php的數(shù)據(jù)操作類,這次的asp.net數(shù)據(jù)操作類,是個(gè)方法2008-07-07asp.net中上傳圖片文件實(shí)現(xiàn)防偽圖片水印并寫入數(shù)據(jù)庫
asp.net上傳圖片文件實(shí)現(xiàn)防偽圖片水印并寫入數(shù)據(jù)庫,需要的朋友可以參考下。2010-10-10Asp.Net MVC學(xué)習(xí)總結(jié)之過濾器詳解
本篇文章主要介紹了Asp.Net MVC學(xué)習(xí)總結(jié)之過濾器詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03Ajax異步無刷新對(duì)局部數(shù)據(jù)更新
Ajax異步無刷新對(duì)局部數(shù)據(jù)更新的實(shí)例2013-03-03