百度天气api初体验

最新推荐文章于 2024-07-17 15:58:38 发布

shitouPlus

最新推荐文章于 2024-07-17 15:58:38 发布

阅读量1.1k

点赞数

分类专栏： JS/编码规范 JS 文章标签： jquery ajax json

本文链接：https://blog.csdn.net/shitouplus/article/details/48248521

版权

JS 同时被 2 个专栏收录

58 篇文章 0 订阅

订阅专栏

JS/编码规范

1 篇文章 0 订阅

订阅专栏

正在学习json和jquery ajax，想找个api练练手。就拿百度免费的api来练练手。

首先需要在本地搭建一个服务器，这里选择XAMPP（无脑搭建本地测试服务器，前端开发人员的测试神器），然后开启里面的sql,apache等服务

本地环境搭建好以后就可以开始写代码了，php代码就不用自己写了，百度已经给你写好了，只需要把自己的apikey加到里面就行了，

只管重要的一点需要把最后一行的改为

要不然返回的值就不是json格式了，说起来有些绕口还是看看我修改后的php代码吧

<?php
    $ch = curl_init();
    $city=$_GET['cityname'];
    $url = 'http://apis.baidu.com/apistore/weatherservice/cityname?cityname='.$city;
    $header = array(
        'apikey: 5ff29f936be097a8ba5734a5c45457fe',
    );
    // 添加apikey到header
    curl_setopt($ch, CURLOPT_HTTPHEADER  , $header);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    // 执行HTTP请求
    curl_setopt($ch , CURLOPT_URL , $url);
    $res = curl_exec($ch);

    // var_dump(json_decode($res));
    echo $res;
?>

然后是前端页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<label>请输入城市<input type="text" id="city"></label>
<div id="weather">天气情况</div>
	<script src="jquery-1.11.3.min.js"></script>
	<script>
	$(document).ready(function() {
		$("#city").blur(function() {
			var city=$(this).val();
			if (city) {
				$.get('data.php',{cityname:city}, function(data) {
					var json=eval("("+data+")");
					$("#weather").html(json.retData.weather);
				});
			};
		});
	});
	</script>
</body>
</html>

这里只是调用其中的天气信息，其它信息的调用类似。

最后总结一下：

对于一个前端开发人员来说如果能了解一些php那是最好，或者和php开发人员一起学习，不然像这些关于前后台数据交互的东西真的很难搞懂，不得不说自己琢磨了很久，也上网搜了很多资料，然而还是不行，最后请教后台的大神他告诉我把php最后那一行代码改为echo $res;才调用成功。

万事开头难，之后的学习要更加努力了