特定时间后，Php ajax刷新div

Question

Here i am able to load div value's after a time interval

But I also need to load the div values by default also.(when i the page loads)

How to ?

<script type="text/javascript">

$(document).ready(function() {                               
 setInterval(function(){
     $("#Temperature").html('');
     $("#Humidity").html('');
     $("#Weather").html('');
     $("#Pressure").html('');
     $("#Wind").html('');
     $("#Sunrise").html('');

  $.ajax({
       url: 'api.php',
       dataType: "json",
       type: 'GET',
       success: function(data) {
          if (data) {
            alert('Hi');
            document.getElementById("Temperature").innerHTML = data['temperature'];
            document.getElementById("Humidity").innerHTML = data['humidity'];
            document.getElementById("Weather").innerHTML = data['condition'];
            document.getElementById("Pressure").innerHTML = data['pressure'];
            document.getElementById("Wind").innerHTML = data['wind'];
            document.getElementById("Sunrise").innerHTML = data['sunrise'];
          }

       }
    });
  }, 600000);
 });

</script>


<div id="Temperature"></div>
<div id="Humidity"></div>
<div id="Weather"></div>
<div id="Pressure"></div>
<div id="Wind"></div>
<div id="Sunrise"></div>

api.php

This the api.php from where i am trying to load the data

<?php
  include('yahoo_weather_codes.php');
  //error_reporting(0);
    $BASE_URL = "http://query.yahooapis.com/v1/public/yql";
    $yql_query = 'select * from weather.forecast where woeid in (select woeid from geo.placefinder where state="Andhra Pradesh" and city="Amaravathi")'; 
    $yql_query_url = $BASE_URL . "?q=" . urlencode($yql_query) . "&format=json";
    // Make call with cURL
    $session = curl_init($yql_query_url);
    curl_setopt($session, CURLOPT_RETURNTRANSFER,true);
    $json = curl_exec($session);
    // Convert JSON to PHP object
    $phpObj =  json_decode($json);
    //echo '<pre>';print_r($phpObj).'<pre>';
    $fahrenheit = $phpObj->query->results->channel->item->condition->temp;
    $celsius = round(5/9*($fahrenheit-32));


   $yahoo_data = array();
   $yahoo_data['temperature'] = $celsius;
   $yahoo_data['code'] = $phpObj->query->results->channel->item->condition->code;
   $yahoo_data['humidity'] =$phpObj->query->results->channel->atmosphere->humidity;
   $yahoo_data['condition'] =$phpObj->query->results->channel->item->condition->text;
   $yahoo_data['pressure'] =$phpObj->query->results->channel->atmosphere->pressure;
   $yahoo_data['wind'] =$phpObj->query->results->channel->wind->speed;
   $yahoo_data['sunrise'] =$phpObj->query->results->channel->astronomy->sunrise; 
   $yahoo_data['sunset'] =$phpObj->query->results->channel->astronomy->sunset;
   $yahoo_data['date'] =$phpObj->query->results->channel->item->forecast['0']->date;
   $yahoo_data['city'] =$phpObj->query->results->channel->location->city;
   $yahoo_data['country'] =$phpObj->query->results->channel->location->country;
   $yahoo_data['region'] =$phpObj->query->results->channel->location->region; 
   $yahoo_data['key'] = $phpObj->query->results->channel->item->condition->code;

   echo json_encode($yahoo_data);

?> 

Answer 1

Just move your AJAX loading to a separate function which you can use both on document load and in our interval. And since you already using jQuery, you may as well replace cumbersome getElementById with equivalent jQuery selectors:

<script type="text/javascript">
$(document).ready(function() {
  function updateData(){
    $("#Temperature").html('');
    $("#Humidity").html('');
    $("#Weather").html('');
    $("#Pressure").html('');
    $("#Wind").html('');
    $("#Sunrise").html('');

    $.ajax({
      url: 'api.php',
      dataType: "json",
      type: 'GET',
      success: function(data) {
        if (data) {
          alert('Hi');
          $("#Temperature").html(data['temperature']);
          $("#Humidity").html(data['humidity']);
          $("#Weather").html(data['condition']);
          $("#Pressure").html(data['pressure']);
          $("#Wind").html(data['wind']);
          $("#Sunrise").html(data['sunrise']);
        }
      }
    });
  }

  updateData();

  setInterval(updateData, 600000);
});
</script>