Question

我正在尝试创建一个单页应用，通过邮政编码搜索天气并显示结果。我正在访问天气数据库，但我仍然坚持如何将特定的json对象附加到我的dom

不完整的javascript

 $(function() {
$("#getzip").submit(function() {
var zip_data = $(this).serialize();
    $.getJSON("get_weather.php",zip_data, function(data); {
    ("#output").append(current_obervation.temperature_string); // this is what I want it to do tho obviously incorrect


  });
 });
})

HTML

<h1>Weather</h1>
<hr />
<form method="get" action="get_weather.php" id="getzip">
<p>
  <label for="zip">ZIP:</label>
  <input type="text" name="zip" id="zip">
  <input type="submit" name="button" id="button" value="Submit" >
</p>

<pre id="output">
</pre>

PHP

<?php
 $zip = isset($_GET['zip']) ? $_GET['zip'] : $_POST['zip'];
 $weather_data = file_get_contents("http://api.wunderground.com/api/6d125bc5977276ee/conditions/q/{$zip}.json");
echo $weather_data 
?>

数据库返回的一小部分样本。我如何精确定位温度并将其附加到dom？

current_observation": {
"image": {
  "url": "http://icons-ak.wxug.com/graphics/wu2/logo_130x80.png",
  "title": "Weather Underground",
  "link": "http://www.wunderground.com"
   "temperature_string": "53.5 F (11.9 C)",
  },
}

Answer 1

您需要在html中添加“输出”。

<div id="output"></div>

$(function() {
    $("#getzip").submit(function() {
        var zip_data = $(this).serialize();
        $.getJSON("get_weather.php",zip_data, function(data); {
             $('#output').html(data.current_observation.temperature_string);
        });
    });  
})

Answer 2

试试这种方式

$('#output').append(data.current_observation.temperature_string)

DEMO

Answer 3

以下是您实际需要的内容。Demo

$('#output').append(data.current_observation.image.temperature_string)

Answer 4

 $.get( "get_weather.php", function( data ) {       
 $( "#output" ).append( "Temperature: " + data.current_observation.temperature_string    )},"json" );

// mentioned "json" as 3rd parameter as it emits json response

上一个例子here的参考。

Answer 5

感谢所有帮助，但我发现这种方式效果最好

$(function() {
$("#getzip").submit(function() {
  var zip_data = $(this).serialize();
  $.getJSON("get_weather.php", zip_data, function(data) {
    $("#output").empty();
    $('#output').append(JSON.stringify( data.current_observation.temperature_string, " "));                   
  });
  return false;
 });
});

将Json对象从数据库附加到HTML

5 个答案: