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>