下面通過(guò)圖文并茂的方式展示給大家，具體內(nèi)容如下所述：
今天下午做一個(gè)項(xiàng)目小練習(xí).需要把查詢(xún)?nèi)罩镜膬?nèi)容顯示到網(wǎng)頁(yè)上來(lái).一開(kāi)始陷入了一個(gè)誤區(qū).
一直以來(lái)我這個(gè)小項(xiàng)目需要訪問(wèn)ashx來(lái)生成html的代碼.后臺(tái)用的Razor模板引擎.
剛開(kāi)始顯示用戶(hù)列表時(shí).因?yàn)槭秋@示到了另一個(gè)界面(其實(shí)就是另一個(gè)網(wǎng)頁(yè)).razor直接輸出沒(méi)什么問(wèn)題
但是下面這個(gè)需要顯示到當(dāng)前頁(yè)面的下面
當(dāng)我ajax提交后.razor模板引擎拼接后的代碼.確是返回到了ajax中的data中
不能像最上面那張圖那樣顯示了.我的想法破滅了.
于是乎,又開(kāi)始想辦法.既然需要返回到當(dāng)前頁(yè)面.那么直接表單提交也許可以.但是表單提交需要刷新.還要改好多代碼.不太喜歡.就放棄了.感覺(jué)還是有辦法的.
從新建個(gè)頁(yè)面.但是那樣的話上面的那些按鈕什么的就沒(méi)了,不美觀.這個(gè)新建的頁(yè)面放到這個(gè)頁(yè)面的下面.怎么放?用ifarme.好像很麻煩.
百度之...
不要返回網(wǎng)頁(yè)源代碼.返回?cái)?shù)據(jù).然后寫(xiě)for循環(huán)綁定.
不過(guò)還是不太喜歡.因?yàn)槲也幌敕艞塺azor.
于是乎...想到了innerHTML
直接改變?cè)氐膆tml代碼,用razor替換代碼.替換好后.傳給ajax的data.然后用innerHTML一賦值.就OK了
需要替換的html代碼
然后頁(yè)面里寫(xiě)一個(gè)table id="tb">/table>.用dom獲取此元素.var tb = document.getElementById("tb");然后tb.innerHTML = 上面的那部分html代碼(用ajax返回);
于是乎就ok.是不是有人覺(jué)的這樣麻煩.但是我就是想要用razor.........
最后,效果圖
以上所述是針對(duì)ajax的查詢(xún)數(shù)據(jù)在網(wǎng)頁(yè)顯示的全部?jī)?nèi)容，希望對(duì)大家有所幫助。
您可能感興趣的文章:- php簡(jiǎn)單實(shí)現(xiàn)查詢(xún)數(shù)據(jù)庫(kù)返回json數(shù)據(jù)
- Ajax詳解及其案例分析
- Ajax方式實(shí)現(xiàn)定期更新頁(yè)面某塊內(nèi)容的方法
