Question

我是JSON和javascript的新手。我想在用户点击我网站上的按钮后，在网址https://api.apixu.com/v1/forecast.json?key=353b879d4d984fcbba772116170405&q=Delhi&days=7上检索一个可用作JSON的数据。我能够用PHP做到这一点，但是为JSON提供了太多的API调用，所以我希望它在用户点击按钮时触发，即

代码如下

<?php

$url      = "https://api.apixu.com/v1/forecast.json?key=353b879d4d984fcbba772116170405&q=Delhi&days=7";
$response = file_get_contents($url);


$response = json_decode($response, true);



// data extraction for current day
$city              = $response['location']['name']; // name of the city
$country           = $response['location']['country']; // name of the country
$max_temp_current  = $response['current']['temp_c']; // current temprature of the day : pls note it is not the max temprature of the day
$min_temp_current  = $response['forecast']['forecastday'][0]['day']['mintemp_c']; // minumum temprature of the day
$icon_current      = $response['current']['condition']['icon']; // to get the icon for current condition;
$condition_current = $response['current']['condition']['text'];
//$condition_current=$response['forecast']['forecastday'][0]['day']['condition']['text']; // current condition as given by the JSON
$date_current1     = $response['forecast']['forecastday'][0]['date']; // Current Date of the day
$d                 = strtotime($date_current1); // this probably converts the day to second count from year 1970, pls see the PHP manual for confirmation.
$date_current      = date('l j F Y', $d); // format the day in the form of dayName dd-monthName-yyyy. eg- Wednesday 26 April 2017
$date_day_current  = date('l', $d); // format the day for just the name of the day like Wednesday, Thursday etc.
$date_today        = date('j F Y', $d); // format the day to form of dd-Month-yyyy. eg-26 April 2017
?>

当用户点击按钮时，他会收到一个警报框，显示当天德里的最高温度。使用PHP，我们可以使用代码获取最大温度 -

         $max_temp_current  = $response['current']['temp_c'];

我无法使用java脚本获取它并将其传递给警告框。

Answer 1

您可以使用xmlHttpRequest-

＆＃13;

function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "https://api.apixu.com/v1/forecast.json?key=353b879d4d984fcbba772116170405&q=Delhi&days=7", true);
  xhttp.send();
}

＆＃13;

<!DOCTYPE html>
<html>
<body>

<h2>Using the XMLHttpRequest Object</h2>

<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>

</body>
</html>

＆＃13;

Answer 2




function displayresult(){
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     myObj = JSON.parse(this.responseText);
     document.getElementById("result").innerHTML = myObj.location.name;
     // you can get all fields with myObj variable.
    }
  };
  xhttp.open("GET", "https://api.apixu.com/v1/forecast.json?key=353b879d4d984fcbba772116170405&q=Delhi&days=7", true);
  xhttp.send();
}
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="displayresult()">Change Content</button>
<div id="result">
</div>
</body>
</html>

我们如何使用onClick事件从JSON获取数据

2 个答案: