ajax添加資料後如何在網頁顯示_實用技巧

來源:互聯網
上載者:User

 下面通過圖文並茂的方式展示給大家,具體內容如下所述: 

  今天下午做一個項目小練習.需要把查詢日誌的內容顯示到網頁上來.一開始陷入了一個誤區.

  一直以來我這個小項目需要訪問ashx來產生html的代碼.後台用的Razor模板引擎.

  剛開始顯示使用者列表時.因為是顯示到了另一個介面(其實就是另一個網頁).razor直接輸出沒什麼問題

  但是下面這個需要顯示到當前頁面的下面

  當我ajax提交後.razor模板引擎拼接後的代碼.確是返回到了ajax中的data中

  不能像最上面那張圖那樣顯示了.我的想法破滅了.
  於是乎,又開始想辦法.既然需要返回到當前頁面.那麼直接表單提交也許可以.但是表單提交需要重新整理.還要改好多代碼.不太喜歡.就放棄了.感覺還是有辦法的.

  從建立個頁面.但是那樣的話上面的那些按鈕什麼的就沒了,不美觀.這個建立的頁面放到這個頁面的下面.怎麼放?用ifarme.好像很麻煩.

  百度之...

  不要返回網頁原始碼.返回資料.然後寫for迴圈綁定.

  不過還是不太喜歡.因為我不想放棄razor.

  於是乎...想到了innerHTML

  直接改變元素的html代碼,用razor替換代碼.替換好後.傳給ajax的data.然後用innerHTML一賦值.就OK了

  需要替換的html代碼

  然後頁面裡寫一個<table id="tb"></table>.用dom擷取此元素.var tb = document.getElementById("tb");然後tb.innerHTML = 上面的那部分html代碼(用ajax返回);
 
    於是乎就ok.是不是有人覺的這樣麻煩.但是我就是想要用razor.........

  最後,效果圖

 以上所述是針對ajax的查詢資料在網頁顯示的全部內容,希望對大家有所協助。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.