jq - ajax- json

来源：互联网发布：alphago 策略网络编辑：程序博客网时间：2024/05/22 13:44

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} ul{list-style: none;width: 320px;height: 480px;border: 1px solid lightgray;margin: auto;overflow:scroll;} li{background: cyan;margin-bottom: 20px;} </style> </head> <script src="js/jquery-2.1.1.js"type="text/javascript"charset="utf-8"></script> <script type="text/javascript"> $(function(){ var arrAllData = []; $.ajax({ type:"get", url:"4.json", async:true, success:function(res){ console.log(res); arrAllData = res.product; setData(); } }); function setData(){ for (var i = 0; i < arrAllData.length; i++) { var liObj = $('<li><p></p><p></p><p></p></li>'); var obj = arrAllData[i]; liObj.find('p').eq(0).text(obj.product_name); liObj.find('p').eq(1).text(obj.product_price); liObj.find('p').eq(2).text(obj.service_desc1); $('#list').append(liObj); } } }) </script> <body> <ul id="list"></ul> </body> </html>

0 0