当页面加载信息而不是像示例中那样使用单击时，如何使Json Jquery加载_Jquery_Html_Json

当页面加载信息而不是像示例中那样使用单击时，如何使Json Jquery加载

jquery html json

当页面加载信息而不是像示例中那样使用单击时，如何使Json Jquery加载,jquery,html,json,Jquery,Html,Json,我从美国地质勘探局收到了这个例子，我想使用这个代码在页面加载时自动加载信息。它目前正在点击。细节因此，我想做的是调用这个页面，因为它加载时，它将拉入默认值或站点信息的所有信息，即value=“04250200” 任何帮助都将不胜感激 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=

我从美国地质勘探局收到了这个例子，我想使用这个代码在页面加载时自动加载信息。它目前正在点击。细节

因此，我想做的是调用这个页面，因为它加载时，它将拉入默认值或站点信息的所有信息，即value=“04250200”

任何帮助都将不胜感激

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <title>USGS Water Services AJAX Example</title>
</head>
<body>
    <h1>USGS Water Services AJAX Example</h1>
    <p>This example shows how the USGS Instantaneous Values web service can be invoked using Asynchronous Javascript and XML (AJAX) technology. The jQuery framework is used.</p>
    <form id="form1" method="post" action="">
        <table width="100%" border="0">
          <tr>
            <td><label for="site"><strong>USGS Site No.</strong></label>              <input name="site" type="text" id="site" value="04250200" size="8" maxlength="15" /> 
              <a href="http://wdr.water.usgs.gov/nwisgmap/index.html">Find sites </a></td>
          </tr>
          <tr>
            <td><label for="sitedesc"><strong>Site Description</strong></label></td>
          </tr>
          <tr>
            <td><textarea name="sitedesc" cols="25" rows="2" readonly="readonly" id="sitedesc"></textarea></td>
          </tr>
          <tr>
            <td><label for="discharge"><strong>Latest Streamflow ft.<sup>3</sup>/sec</strong></label></td>
          </tr>
          <tr>
            <td><input id="discharge" size="7" readonly="readonly" /></td>
          </tr>
          <tr>
            <td><label for="date"><strong>Date</strong></label></td>
          </tr>
          <tr>
            <td><input id="date" size="10" readonly="readonly" /></td>
          </tr>
          <tr>
            <td><label for="time"><strong>Time</strong></label></td>
          </tr>
          <tr>
            <td><input id="time" size="5" readonly="readonly" /></td>
          </tr>
          <tr>
            <td><label for="tz"><strong>Time Zone</strong></label></td>
          </tr>
          <tr>
            <td><input id="tz" size="6" readonly="readonly" /></td>
          </tr>
        </table>
      <p>
            <input type="button" name="query" id="query" value="Get Latest Streamflow" />
            <input type="reset" name="reset" id="reset" value="Reset" />
      </p>
    </form>
<script type="text/javascript">
    //<![CDATA[
    // Proof of concept for AJAX usage with instantaneous values service
    $('#query').click(function() {
        site = $('#site').attr("value");
        $.ajax({
          url: "http://waterservices.usgs.gov/nwis/iv/?format=json&sites=" + site + "&parameterCd=00060",
          dataType: 'json',
          data: '',
          success: function(json){
               $('#sitedesc').text(json.value.timeSeries[0].sourceInfo.siteName);
               $('#discharge').val(json.value.timeSeries[0].values[0].value[0].value);
               datetime = json.value.timeSeries[0].values[0].value[0].dateTime;
               // Get date
               myDate = datetime.substr(5,2) + '/' + datetime.substr(8,2) + '/' + datetime.substr(0,4);
               $('#date').val(myDate);
               // Get time
               myTime = datetime.substr(11,5);
               $('#time').val(myTime);
               // Get timezone
               myTZ = datetime.substr(23);
               $('#tz').val(myTZ);
             },
          error : function(XMLHttpRequest, textStatus, errorThrown) {
               $('#sitedesc').text('Error. Site Number was probably invalid or not a real-time site.');
               $('#discharge').val('');
               $('#date').val('');
               $('#time').val('');
               $('#tz').val('');
          }
        });
    });
//]]>
</script>
</body>
</html>


美国地质勘探局水服务AJAX示例
美国地质勘探局水服务AJAX示例
这个例子展示了如何使用异步Javascript和XML（AJAX）技术调用USGS瞬时值web服务。使用jQuery框架
美国地质勘探局网站编号
站点描述
最新流量ft.3/sec
日期
时间
时区


//

更改

$('#query').click(function() {

到


$（文档）.ready（函数（）{
站点=$（“#站点”）.attr（“值”）；
$.ajax({
url:“http://waterservices.usgs.gov/nwis/iv/?format=json&sites=“+site+”&参数cd=00060”，
数据类型：“json”，
数据：“”，
成功：函数（json）{
$（'#sitedesc'）.text（json.value.timeSeries[0].sourceInfo.siteName）；
$（'#discharge'）.val（json.value.timeSeries[0].values[0].value[0].value）；
datetime=json.value.timeSeries[0]。值[0]。值[0]。日期时间；
//约会
myDate=datetime.substr（5,2）+'/'+datetime.substr（8,2）+'/'+datetime.substr（0,4）；
$（'日期'）.val（myDate）；
//有时间
myTime=datetime.substr（11,5）；
$（'#time'）.val（myTime）；
//获取时区
myTZ=日期时间.substr（23）；
$（'#tz'）.val（myTZ）；
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
$（“#sitedesc”）.text（'错误。站点号可能无效或不是实时站点'）；
$（'出院'）.val（''）；
$（'日期'）.val（''）；
$（'时间'）.val（''）；
$（'#tz'）.val（''）；
}
});
});

尝试使用$（document）.ready（）函数感谢Chris，它工作得非常出色。谢谢你的回复，我希望我能投票，也能为你打勾。感谢you@VarickDesign您可以对任何/所有答案进行投票，但只能接受一个答案。选择对你最有帮助的答案谢谢你的回答。我仍然不能投票，因为我刚刚加入，但你的回答让我开始了。再次感谢：）啊，你说得对，我看着@Maximo的21代表认为是你。你可以在投票站投票15@VarickDesign我把你的问题投了赞成票，让你走上正轨：）谢谢马克西莫，这也很好用。对不起，新的堆栈，所以我不知道如何投票，我似乎不能点击两个答案说他们已经回答了。

$(function() {

<script type="text/javascript">
$(document).ready(function() {
    site = $('#site').attr("value");
    $.ajax({
      url: "http://waterservices.usgs.gov/nwis/iv/?format=json&sites=" + site + "&parameterCd=00060",
      dataType: 'json',
      data: '',
      success: function(json){
           $('#sitedesc').text(json.value.timeSeries[0].sourceInfo.siteName);
           $('#discharge').val(json.value.timeSeries[0].values[0].value[0].value);
           datetime = json.value.timeSeries[0].values[0].value[0].dateTime;
           // Get date
           myDate = datetime.substr(5,2) + '/' + datetime.substr(8,2) + '/' + datetime.substr(0,4);
           $('#date').val(myDate);
           // Get time
           myTime = datetime.substr(11,5);
           $('#time').val(myTime);
           // Get timezone
           myTZ = datetime.substr(23);
           $('#tz').val(myTZ);
         },
      error : function(XMLHttpRequest, textStatus, errorThrown) {
           $('#sitedesc').text('Error. Site Number was probably invalid or not a real-time site.');
           $('#discharge').val('');
           $('#date').val('');
           $('#time').val('');
           $('#tz').val('');
      }
    });
});
</script>