jaxa案例

来源:互联网 发布:光伏产业数据查询 编辑:程序博客网 时间:2024/06/03 16:44
<!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>