js 解析json数据实现快递包裹的查询

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>

js 解析json数据实现快递包裹的查询相关推荐

JS解析json数据并将json字符串转化为数组的实现方法
json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法, ...
JS解析json数据（json字符串和数组之间相互转换）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
js解析json数据
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1. 一种为使用eval()函数. 2. 使用Function对象来进行返回解析一.使用eval()函数系统后台代码 /// & ...
js html 处理json数据,js 解析JSON数据
链接原文转自:http://www.w3cschool.cn/json/xumd1piw.html http://www.cnblogs.com/zoumiaomiao/p/4909539.html ...
关于js解析Json数据的方法
JSON(JavaScript Object Notation, JS 对象标记JSON) 中文意思就是JavaScript对象标示方式! 我们经常会遇到ajax请求后台接口得到json数据,此时我们 ...
前台js解析json数据
如果数据是这样的 {"code":"noError","data":"啦啦啦啦","msg":&qu ...
js解析json js获取json里面的某个节点的数据 js解析json数据
获取data里面的节点 $.ajax({type: "GET",url: '../api/数据接口.aspx',dataType: 'json',success: function ...
如何使用JS解析json数据和字符串
$.ajax({url: "/recommend",type: "post",dataType: "json",// contentType ...
js怎么解析json数据
js解析json数据,可以使用JSON.parse()方法来实现解析.JSON.parse()方法可以解析JSON字符串,转换为 JavaScript 对象打造全网web前端全栈资料库(总目录)看完 ...

js 解析json数据实现快递包裹的查询

js 解析json数据实现快递包裹的查询相关推荐

最新文章

热门文章