This article mainly introduces the PHP Ajax JavaScript JSON to achieve weather information to get the relevant information, interested in the small partners can refer to
To add a weather forecast function on your website is a very common requirement, and it is not very difficult to realize it. Here are a few simple ways to introduce today.
Use of third-party services
There is a simple way, with the help of http://www.tianqi.com/plugin/ Weather Services on the Internet, we can customize our display shape to achieve the ability to add weather forecasts.
Here is a simple small example:
Copy the Code code as follows:
<iframe width= "420" scrolling= "no" height= "frameborder=" 0 "allowtransparency=" true "src=" http://i.tianqi.com/ Index.php?c=code&id=12&icon=1&num=5 "></iframe>
Indirect way
It is indirect to get the weather information, it is because for us personally, it is impossible to launch satellites by themselves, or to maintain the large amount of the weather forecast services. We do this by using data interfaces provided by other websites.
Ideas
Because of the characteristics of Ajax itself determines not to cross-domain request, so we need to use PHP to try the function of the agent. Specific ideas are as follows:
Client opens our web page based on PHP to obtain client IP using a third-party service to obtain the IP corresponding to the city code call weather interface, according to the city code to obtain the weather information the client obtains the data returned by the server and displays it on the page.
Service to use
Here is a list of common interfaces we use
• IP to the city: "Http://ip.taobao.com/service/getIpInfo.php?ip=XXX"
• View the corresponding city code: http://blog.csdn.net/anbowing/article/details/21936293
• Access the weather interface for data: "http://www.weather.com.cn/adat/sk/". $city _id. " html
Here are a few good interface sites.
• Weather API Interface Daquan
Implementation code
The implementation of the code is divided into three steps. The logic before us to write.
• Get the city that corresponds to the client IP
<?phpheader ("Content-type:text/json;charset=utf-8");//Ajax's own characteristics determine that it cannot cross-domain requests, so use PHP's proxy mode to achieve the collapse and request//$url = ' http:// Www.weather.com.cn/adat/sk/101010100.html ';//1. Get text content information, 2 get URL corresponding Data//$data = file_get_contents ($url);//echo $data ;/////////////////////////////////////idea one//ip-->> City----->>> City Code----->>>> Weather Information// Get the city information for the IP, as well as the encoding http://ip.taobao.com/service.getIpInfo.php?ip=60.205.8.179//get weather information by encoding HTTP// www.weather.com.cn/adat/sk/encoding. Html$client_ip = "60.205.8.179";//$_server[' remote_addr ']; $url = "http:// Ip.taobao.com/service/getipinfo.php?ip= "." $client _ip "; $result = file_get_contents ($url); Echo $result;/////////////////////////////////////idea two?>
At the client, we can see
<script> function Getcitycode () { var xhr = new XMLHttpRequest (); Xhr.onreadystatechange = function () { if (xhr.readystate==4) { //alert (xhr.responsetext); Eval (' var citycode= ' +xhr.responsetext); alert (citycode.data.city); } } Xhr.open (' Get ', './getcityid.php '); Xhr.send (NULL); }</script>
• Request the city code from the server and pass it to the weather interface.
<?php$city_id = $_get[' city '];//print_r ($GET); Invoking the database code logic, finding the corresponding city codes only needs to be alerted to the city tables we have stored. And the city-coded table basically does not change, we can use it stably. $weather _url = "http://www.weather.com.cn/adat/sk/". $city _id. " HTML "; $weather = file_get_contents ($weather _url); Echo $weather;? >
Full front-end code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Summarize
It is not difficult to add a weather forecast feature on your website. There may be a simpler way, even if it's a process.
The above is the entire content of this article, I hope to be able to help you learn.