Ajax中怎么通过城市名获取数据

tangjin

作者

这期内容当中小编将会给大家带来有关Ajax中怎么通过城市名获取数据，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

聚合数据全国天气预报接口：https://www.juhe.cn/docs/api/id/39

Ajax中怎么通过城市名获取数据

接口地址：http://v.juhe.cn/weather/index 支持格式：json/xml 请求方式：get 请求示例：http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=您申请的KEY 调用样例及调试工具：API测试工具请求参数说明：名称类型必填说明 cityname string Y 城市名或城市ID，如：”苏州”，需要utf8 urlencode dtype string N 返回数据格式：json或xml,默认json format int N 未来6天预报(future)两种返回格式，1或2，默认1 key string Y 你申请的key

HTML部分代码：

<!DOCTYPEhtml>
<htmllang="en">
<metacharset="UTF-8">
<title>天气预报</title>
<scriptsrc="jquery-2.1.1.min.js"></script>
<linkrel="stylesheet"href="w.css">
<divid="mf_weather">
<scriptsrc="w.js"></script>
<buttonid="search">天气查询</button>
<inputid="city"type="text"value="tbody">
<divclass="ctn">
<divid="mufeng">
</div>
<divid="future"></div>
</div>
</html>

JavaScript部分：

/** 1.输入城市名* 2，点击的时候发送请求* 3.响应成功渲染页面* */$('#search').on('click',function(){var city = $('#city').val()||'北京';$citycode=urlencode(city);url='http://v.juhe.cn/weather/index?format=2&cityname='+$citycode+'&key=c82727e986a4f6cfc6ba1984f1f9183a';$.ajax({url: url,dataType: "jsonp",type:"get",data:{location:city},success:function(data){var sk = data.result.sk;var today = data.result.today;var futur = data.result.future;var fut = "日期温度天气风向";$('#mufeng').html("" + '当前: ' + sk.temp + '℃ , ' + sk.wind_direction + sk.wind_strength + ' , ' + '空气湿度' + sk.humidity + ' , 更新时间' + sk.time + "" + today.city + ' 今天是: ' + today.date_y + ' ' + today.week + ' , ' + today.temperature + ' , ' + today.weather + ' , ' + today.wind + "");$('#future').html("" + '未来: ' + futur[0].temperature+ '℃ , ' + futur[0].weather + futur[0].wind + ' , ' + ' , 更新时间' + futur[0].week+futur[0].date + "" + today.city + "");} });});function urlencode (str) { str = (str + '').toString(); return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/$/g, '%28'). replace(/$/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+'); } })

上述就是小编为大家分享的Ajax中怎么通过城市名获取数据了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注恰卡编程网行业资讯频道。

阅读全文

发布于 2021-07-29 21:59:18

ajax