jQuery+Ajax+js實現(xiàn)請求json格式數(shù)據(jù)并渲染到html頁面操作示例
本文實例講述了jQuery+Ajax+js實現(xiàn)請求json格式數(shù)據(jù)并渲染到html頁面操作。分享給大家供大家參考,具體如下:
1、先給json格式的數(shù)據(jù):
[ {"id":1,"name":"stan"}, {"id":2,"name":"jack"}, {"id":3,"name":"lucy"}, {"id":4,"name":"mary"}, {"id":5,"name":"jerry"}, {"id":6,"name":"tom"} ]
2、通過訪問html頁面,獲取并展示數(shù)據(jù):
方法一:
<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <body> <div id="test"> </div> <script type="text/javascript"> window.οnlοad=function(){ //js代碼請求 } $(function(){ $.ajax({ method:"post", url:"http://localhost:81/getpersons",/*這里要寫nginx訪問的全路徑*/ data:{}, dataType: "json", success: function(data){ var str="<ul>"; $.each(data,function(i,items){ str+="<li>"+"ID:"+items.id+"</li>"; str+="<li>"+"姓名:"+items.name+"</li>"; }); str+="</ul>"; $("div").append(str); } }); }) </script> </body> </html>
方法二:
<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <body> <div id="test"> <table border="1" cellspacing="1" cellpadding="1" id="a1"> </table> </div> <script type="text/javascript"> window.οnlοad=function(){ //js代碼請求 } $(function(){ $.ajax({ method:"post", url:"http://localhost:81/getpersons",/*這里要寫nginx訪問的全路徑*/ data:{}, success: function(data){ alert(data); //將json數(shù)據(jù)轉(zhuǎn)換 dd=eval("("+data+")"); var htmls; for(var i=0;i<dd.length;i++){ htmls="<tr>+<td>"+"id: "+dd[i].id+"</td>+<td>"+"name :"+dd[i].name+"</td>+</tr>"; $("#a1").append(htmls); } } }); }) </script> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題:《jquery中Ajax用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
html5的自定義data-*屬性和jquery的data()方法的使用示例
人們總喜歡往HTML標(biāo)簽上添加自定義屬性來存儲和操作數(shù)據(jù),這就是為什么在HTML5規(guī)范里增加了一個自定義data屬性,你可以拿它做很多有用的事情2013-08-08基于jquery trigger函數(shù)無法觸發(fā)a標(biāo)簽的兩種解決方法
下面小編就為大家分享一篇基于jquery trigger函數(shù)無法觸發(fā)a標(biāo)簽的兩種解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01內(nèi)容滑動切換效果jquery.hwSlide.js插件封裝
這篇文章主要為大家詳細(xì)介紹了jQuery開發(fā)之內(nèi)容滑動切換效果的相關(guān)資料,jquery.hwSlide.js插件進(jìn)行封裝具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-07-07