<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="txtSearch"/>
<input type="button" value="搜索" id="btnSearch" />
<div id="menu">
</div>
</body>
<script src="jquery-1.11.3.js"></script>
<script>
//一共就2件事
//获取数据
//解析数据
$(function(){
$("#btnSearch").click(function(){
var menu=$("#menu");
menu.text("正在加载。。。。。")
var txt=$("#txtSearch").val();
txt=encodeURIComponent(txt);
$.ajax({
type:"get",
url:"http://apis.juhe.cn/cook/query?key=a793824f8f99d0cb08ad23e7db87a4bc&rn=3&pn=0&dtype=jsonp&menu="+txt,
dataType:"jsonp",
success:function(data){
//先清空容器
menu.text("");
if(data.resultcode!=200){
menu.text("亲没有查到")
}
// console.log(data)
for(var i=0;i<data.result.data.length;i++){
var mydata=data.result.data[i];
var all=$('<div class="all"></div>')
menu.append(all);
var h2=$('<h2>'+mydata.title+'</h2>')
all.append(h2)
}
},
error:function(){
menu.text("错误")
}
})
})
})
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="txtSearch"/>
<input type="button" value="搜索" id="btnSearch" />
<div id="menu">
</div>
</body>
<script src="jquery-1.11.3.js"></script>
<script>
//一共就2件事
//获取数据
//解析数据
$(function(){
$("#btnSearch").click(function(){
var menu=$("#menu");
menu.text("正在加载。。。。。")
var txt=$("#txtSearch").val();
txt=encodeURIComponent(txt);
$.ajax({
type:"get",
url:"http://apis.juhe.cn/cook/query?key=a793824f8f99d0cb08ad23e7db87a4bc&rn=3&pn=0&dtype=jsonp&menu="+txt,
dataType:"jsonp",
success:function(data){
//先清空容器
menu.text("");
if(data.resultcode!=200){
menu.text("亲没有查到")
}
// console.log(data)
for(var i=0;i<data.result.data.length;i++){
var mydata=data.result.data[i];
var all=$('<div class="all"></div>')
menu.append(all);
var h2=$('<h2>'+mydata.title+'</h2>')
all.append(h2)
}
},
error:function(){
menu.text("错误")
}
})
})
})
</script>
</html>