脚本宝典收集整理的这篇文章主要介绍了js實例教程-JS拼接HTML頁面的方法教程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小寶典致力於為廣大程序猿（媛）提供高品質的代碼服務，請大家多多光顧小站，小寶典在此謝過。

在日常開發中如果使用ajax進行異步刷新頁面局部數據，會常用到JS來拼接HTML模塊頁面。在拼接過程中，尤其注意函數，變量的拼接處理。以下用JS來實現拼接目標頁面塊：

目標展示頁面塊：（以一個需要刷新的table為例）

後台處理hashMaps (List)集合，轉化為JSONArray,返回給前端ajax回調函數

前端調用的JS方法，根據回調函數返回值拼接table內容，實現刷新：

一.首先定義data來拼接table頁面中數據展示塊，也就是 圖一 foreach循環遍歷的數據塊。

仔細注意函數及其內部參數的拼接，如圖所示，這個很重要，不然你拼接后的函數很有可能不能用。

二.然後緊接着拼接table的頭部項，定義show拼接，最後把data加入到show內部，完成table數據刷新。

注意：這裡關於data拼接到show的方式，可能有人會直接把拼接data的for循環直接加到show里，來完成拼接。我親測過是不行的，必須分開寫完成組合拼接。

這裡也稍微介紹了一下怎麼樣將 List(hashMap) 轉化為 JsonArray,對於返回的Json數組怎麼樣進行數據讀取的操作。

覺得可用，就經常來吧！Javascript技巧 腳本寶典 歡迎評論哦！ js技巧，巧奪天工，精雕玉琢。小寶典獻醜了！

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-JS拼接HTML頁面的方法教程全部内容，希望文章能够帮你解决js實例教程-JS拼接HTML頁面的方法教程所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。