js 解析json資料實現快遞包裹的查詢
阿新 • • 發佈：2019-01-01
1，資料介面用的聚合資料的（介面收費，有次數限制，註冊免費送100次）
2，此小demo使用了，js,jQuery,和json資料
3效果圖
4.實現程式碼
注意！，jQuery的js檔案自己引入，還有介面要自己註冊
如有問題聯絡本人
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <style type="text/css" media="screen"> ul,li{ list-style: none; } </style> </head> <body> <input type="text"> <button type="button">點選</button> <div class="div"> </div> </body> <script type="text/javascript"> $(function() { $('button').click(function() { var menu1 = $('input').val(); $.ajax({ url: 'http://apis.juhe.cn/cook/query?key=這裡寫自己的key(聚合資料自己可以註冊)', data: { menu: menu1 }, dataType: 'jsonp', type: 'get', success: function(msg) { var data1 = msg; var res = data1.result.data; console.log(data1); console.log(data1.result.data) $.each(res, function(index, val) { var id = val.id; var li = '<li>'+id+'</li>'; $('.div').append(li); console.log(id); console.log(li); $.each(val.steps, function(index, v) { var im = '<img src="'+v.img+'" alt="">'; $('.div').append(im); var step = '<p>'+v.step+'</p>'; }); var li = '<li>菜名：'+val.title+'</li>'; $('.div').append(li); var li = '<li>屬性：'+val.tags+'</li>'; $('.div').append(li); var li = '<li>做法：'+val.burden+'</li>' $('.div').append(li); }); }, error: function() { console.log("還失敗") } }) }); }) </script> </html>