Ajax effect of weather forecast

Recently, I saw a lot of real-time weather forecasts on my website, which is very practical and has a good user experience. It also provides great help to users. Users can learn real-time weather information through your website. I felt quite interesting, so I studied the implementation methods. So I decided to share the Code with you, hoping to contribute to your front-end business.

The principle is actually very simple. When the page is loaded, the PHP file is requested and a group of json is returned. This set of json is the weather information we need. We only need to parse the returned json and put it in the corresponding position.

JavaScript code:

[Javascript]
$ (Function (){

$. Ajax ({
// Request address
Url: "weather. php ",
// The function executed after the request is successful
Success: function (data ){
 
// Parse the returned data with eval () and convert the string to JSON format
Var oD = eval ('+ data + ')');

// Get element with jquery-1.8.2
Var $ place = $ (". place "),
$ Temp = $ (". temp "),
$ Wind = $ (". wind "),
$ WindPower = $ (". windPower ");

// Place the returned data to the corresponding location
Using place.html (oD ["weatherinfo"] ["city"]);
$Temp.html (oD ["weatherinfo"] ["temp"] + "° ");
$Wind.html (oD ["weatherinfo"] ["WD"]);
Export windpower.html (oD ["weatherinfo"] ["WS"]);
 
}
});

})

$ (Function (){
 
$. Ajax ({
// Request address
Url: "weather. php ",
// The function executed after the request is successful
Success: function (data ){

// Parse the returned data with eval () and convert the string to JSON format
Var oD = eval ('+ data + ')');

// Get element with jquery-1.8.2
Var $ place = $ (". place "),
$ Temp = $ (". temp "),
$ Wind = $ (". wind "),
$ WindPower = $ (". windPower ");

// Place the returned data to the corresponding location
Using place.html (oD ["weatherinfo"] ["city"]);
$Temp.html (oD ["weatherinfo"] ["temp"] + "° ");
$Wind.html (oD ["weatherinfo"] ["WD"]);
Export windpower.html (oD ["weatherinfo"] ["WS"]);

}
});
 
})

 

Because data is obtained from other websites, I use a little bit of php knowledge. The idea of PHP is to use the file_get_contents () function to request the specified address and output the returned data to the foreground.

PHP code:

[Php]
<? Php
$ Weather = file_get_contents ("http://www.weather.com.cn/data/sk/101010100.html ");
Echo $ weather;
?>

<? Php
$ Weather = file_get_contents ("http://www.weather.com.cn/data/sk/101010100.html ");
Echo $ weather;
?>

HTML code:

[Html]
<Div class = "all">
Here is: <span class = "place"> city </span>,
The temperature is <span class = "temp"> temperature </span>,
Wind direction: <span class = "wind"> wind direction </span>,
Wind power: <span class = "windPower"> Wind Power </span>
</Div>

<Div class = "all">
Here is: <span class = "place"> city </span>,
The temperature is <span class = "temp"> temperature </span>,
Wind direction: <span class = "wind"> wind direction </span>,
Wind power: <span class = "windPower"> Wind Power </span>
</Div>

Add some styles to make the page clearer.

Css code:

[Css]
 
. All span {font: bold 30px/50px ""; color: red ;}

. All span {font: bold 30px/50px ""; color: red ;}

 

The above is the simple Weather Forecast effect, and there are some simple principles for implementation. I hope it will be helpful to everyone's front-end business. The above is only my understanding. If there are minor problems, we can communicate and learn from each other at any time.