AJax 把拿到的后臺數(shù)據(jù)在頁面中渲染的實例
更新時間：2018年08月11日 08:42:54 作者：愛吃排骨
今天小編就為大家分享一篇AJax 把拿到的后臺數(shù)據(jù)在頁面中渲染的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1.先放一段ajax http://xxxxx/GCMS/dispatch/getCarTypes 這樣一段URL
2.下面來使用它 ，貼代碼
$(".set-value").on("tap",function(){
var html="";
$.get("http://XXXX/dispatch/getCarTypes",function(data,status){
for( var i=0;i<data.data.length;i++){
// $(".cell").html(data.data[0].data+"<img src='data.data[0].url' />")
html+=
'<li class="mui-table-view-cell">'
+'<img src="'+data.data[i].url+'">' +data.data[i].data
+'</li>'
}
$(".set-select").html(html)
})
})
這里需要注意的是 var html="";這里 需要在$.get前面創(chuàng)建，如果在$.get后面創(chuàng)建，會獲取到一個underfind 的數(shù)據(jù).
接下來 就是拼接數(shù)據(jù)了
html+= '<li class="mui-table-view-cell">' +'<img src="'+data.data[i].url+'">' +data.data[i].data +'</li>'
最后，把定義好的html 賦值到 你需要在html頁面上渲染的地方
$(".set-select").html(html)
效果展示：
以上這篇AJax 把拿到的后臺數(shù)據(jù)在頁面中渲染的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
AJAX技術(shù)經(jīng)過這么多年的發(fā)展，出現(xiàn)了一些框架或類庫用于簡化開發(fā)工作，不同的框架類庫的使用方法也各不相同。 現(xiàn)在，再回頭看看這些技術(shù)，看看這些框架類庫，我們能感受到技術(shù)在不斷地發(fā)展，AJAX開發(fā)越來越容易了。2015-09-09
防止ajax重復(fù)請求的方法(GET和POST) ,需要的朋友可以參考下。2011-10-10
AJAX跨域請求之JSONP獲取JSON數(shù)據(jù)
JSONP(JSON with Padding)是一個非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過javascript callback的形式實現(xiàn)跨域訪問（這僅僅是JSONP簡單的實現(xiàn)形式）。2015-09-09
這篇文章主要介紹了JSP+Ajax 添加、刪除多選框2006-10-10
這篇文章主要為大家詳細(xì)介紹了ajax使用formdata上傳文件流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。接下來通過本文給大家講解ajax的工作原理及優(yōu)缺點，感興趣的朋友一起看看吧2016-11-11
這篇文章主要介紹了jQuery Ajax方式上傳文件的方法的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
ajax跨域獲取網(wǎng)站json數(shù)據(jù)的實例
下面小編就為大家分享一篇ajax跨域獲取網(wǎng)站json數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
下面小編就為大家?guī)硪黄P(guān)于ajax的多次請求問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
選擇一部著作，會通過 Ajax 實時獲得相關(guān)的名字，一個簡單的不涉及服務(wù)器的Ajax實例,需要的朋友可以參考下2014-05-05