augus007

通过ajax实现请求url地址,并获取到报文后,并返回给标签

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>未来五日天气预报</title>
</head>
<body>
<div id=\'input3\'>dfdfe</div>
<div id=\'input2\'>dfdfe</div>
<div id=\'input1\'>dfdfe</div>
</body>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
getdata();  //执行下面定义的getdata()函数。
setInterval("getdata()",2000);//N毫秒刷新一次,1000毫秒=1秒  //实现无限循环执行getdata()
});



function getdata(){
    var myDate = new Date();  //定义一个日期实例
    $("#input3").html(myDate.toLocaleString())//获取日期与时间 ,并将结果显示在id=input3的text中
    var this_ity; //定义一个城市变量
    //$.getScript 通过get方法请求url地址,然后再执行后面的回调函数(即:function())
    $.getScript(\'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js\', function() { //该地址是用来根据ip地址获取城市名字
    //remote_ip_info 是url地址请求后的返回数据
    //返回的格式是个人认为是json格式。
    //json 格式为“名称:值”,如:var y={"desc":"OK","status":1000}; 如果想获取值,如:y.status此时y.status就等于1000; 名字不可重复。 
            if (remote_ip_info.ret == \'1\') { //判断报文返回数据正确
              this_ity=remote_ip_info.city; //获取城市
              }
              var urld="http://wthrcdn.etouch.cn/weather_mini?city="+this_ity; //获取天气预报的地址
                $.ajax({
                        type: "GET",
                        url: urld,
                        dataType: "json",  //指定数据类型为json
                        success: function(data){  //成功请求url后,执行function(data)。 等同于$.getScrip
                        /*
                           * 返回的数据格式为:
                             * {"desc":"OK","status":1000,"data":{"wendu":"22","ganmao":"风较大,较易发生感冒,注意防护。","forecast":[{"fengxiang":"北风","fengli":"5-6级","high":"高温 24℃","type":"晴","low":"低温 11℃","date":"3日星期六"},{"fengxiang":"北风","fengli":"4-5级","high":"高温 19℃","type":"晴","low":"低温 8℃","date":"4日星期日"},{"fengxiang":"无持续风向","fengli":"微风","high":"高温 21℃","type":"晴","low":"低温 9℃","date":"5日星期一"},{"fengxiang":"无持续风向","fengli":"微风","high":"高温 21℃","type":"多云","low":"低温 10℃","date":"6日星期二"},{"fengxiang":"无持续风向","fengli":"微风","high":"高温 24℃","type":"晴","low":"低温 12℃","date":"7日星期三"},{"fengxiang":"无持续风向","fengli":"微风","high":"高温 23℃","type":"晴","low":"低温 11℃","date":"8日星期四"}],"yesterday":{"fl":"微风","fx":"无持续风向","high":"高温 23℃","type":"晴","low":"低温 12℃","date":"2日星期五"},"aqi":"59","city":"北京"}}
                             */
                        var json=data.data;
                        $("#input2").html(json.city)
                        var fengli=json.forecast[0].low;//因 data.data 的值是一个数组 。所以需要forecast[0]
                        $("#input1").html(fengli)
  }
});
              });
    
}
</script>
</html>

 

分类:

技术点:

相关文章:

  • 2021-10-16
  • 2021-11-17
  • 2021-07-31
  • 2021-12-05
  • 2021-11-24
  • 2021-11-30
  • 2021-10-17
猜你喜欢
  • 2021-11-05
  • 2021-04-07
  • 2021-09-10
  • 2021-04-04
  • 2021-09-10
  • 2021-11-28
  • 2021-11-07
相关资源
相似解决方案