PHP Ajax JavaScript JSON get weather information implementation Code _php instance

To add a weather forecast function on your website is a very common demand, it is not difficult to achieve. Let's introduce a few simple methods today.

Using third party services

There is such a simple way, with the help of the weather service on the http://www.tianqi.com/plugin/ Web, we can customize our display shape to realize the function of adding weather forecast.

Here's a simple little example:

Copy 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 obtain weather information, because it is impossible for us personally to launch satellite, or to maintain the size of the weather forecast of the amount of service. We are using the data interface provided by other websites to achieve this.

Ideas

Because the characteristics of Ajax itself decide not to be able to request across the domain, so we need to use PHP to test the function of the agent. The specific ideas are as follows:

The client opens our web page based on PHP to obtain the client IP using a third party service to get 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.

Services that are used

Here's a list of commonly used interfaces that we use
IP City: "Http://ip.taobao.com/service/getIpInfo.php?ip=XXX"
• View the code for the corresponding city: http://blog.csdn.net/anbowing/article/details/21936293
• Access to weather interfaces, get data: "http://www.weather.com.cn/adat/sk/". $city _id. " html

Below are a few good interface sites.
• Weather API Interface Encyclopedia

Implementation code

The implementation of the code is divided into three steps. Take care of our previous logic to write it.
• Get the client IP corresponding city

<?php
Header ("Content-type:text/json;charset=utf-8");
Ajax's own characteristics determine that it cannot request across domains, so use the PHP proxy mode to achieve 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 corresponding city information of IP, and encode http://ip.taobao.com/service.getIpInfo.php?ip=60.205.8.179
//Get weather information by code 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 again to the server and pass it to the weather interface.

<?php

$city _id = $_get[' city '];
Print_r ($GET);
Call the database code logic, find the city of the corresponding city code
only need from our implementation of the Stored city table in the alert to find it. And the city code of the table basically does not change, we can stabilize the use.
$weather _url = "http://www.weather.com.cn/adat/sk/". $city _id. " HTML ";
$weather = file_get_contents ($weather _url);
echo $weather;



? >

Front End complete code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Summarize

It's not hard to add a weather forecast feature to 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 help you learn, but also hope that we support the cloud habitat community.