四十二、jQuery的ajax请求

一、Ajax请求方法

1.js原生ajax方法:

/1.创建XHR对象 (服务器交互对象)  注意兼容
    var ajax;
    if(window.XMLHttpRequest){
        ajax=new XMLHttpRequest();
    }else{
        ajax=new ActiveXObject("Microsoft.XMLHttp"); //IE6,IE5
    }
//2.使用open方法设置和服务器交互
    ajax.open(method,url,async,username,password); //get post
//3.send()设置发送数据，开始和服务器端的交互
    ajax.send();
//4.注册事件onreadystatechang
    ajax.onreadystatechange=function(){
        //5.进入成功，判断状态码，更新界面
        if(ajax.readyState==4&&ajax.status==200){
            console.log(ajax.responseText);
        }
    }

2.jquery中ajax:

(1)$.get()方法:使用ajax的HTTP get请求从服务器加载数据

语法：$.get(URL,data,function(data,status,xhr),dataType) 返回string型

注意：将string转换为json对象，JSON.parse()或eval()，但eval()并不常用

$.get(
    "./data/datainfo.txt",
    function(data){
        console.log(data);//string型
      //console.log(JSON.parse(data)); //json对象
        console.log(eval(data)); //json对象
    }
);

(2)$.post() 使用Ajax的HTTP post请求从服务器加载数据

语法：$(selector).post(URL,data,function(data,status,xhr),dataType) 返回string型

$.post({
        url:"./data/datainfo.txt",
        dataTpye:"JSON",
        success:function(data){
            console.log(data); //string型
            console.log(JSON.parse(data));
            console.log(eval(data));
    }
});

(3)$.ajax() 执行异步Ajax(异步http)请求

所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

语法：$.ajax({name:value, name:value, ... }) 返回json对象

$.ajax({
    url:"./data/datainfo.txt",
    data:{"name":"lisi"},
    type:"post",
    dataType:"JSON",
    success:function(data){
        console.log(data);  //json对象
    },
    error:function(){
        console.log("输出错误")
    }
})

(4)$.getJSON()方法使用ajax的http get请求json数据

语法 $(selector).getJSON(url,data,success(data,status,xhr)) 返回json对象

$.getJSON({
    url:"./data/datainfo.txt",
    type:"get",
    dataType:"JSON",
    success:function(data){
        console.log(data);
    }
})

二、远程调用API案例--简易天气预报

1.编写简单的html页面并增加样式

界面图

2.利用jquery ajax访问远程API数据，并将数据添加到界面内;

利用$.ajax()方法访问数据；

代码：<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .block{
            width: 800px;
            height: 450px;
            border: 1px solid black;
            margin: 10px auto;
            background: url("./imgs/4437e6a2ba29129fda7d01.jpg") 0 0 no-repeat;
            -webkit-background-size: 100%;
            background-size: 100%;
            overflow: hidden;
        }
        .city{
            width: 100%;
            line-height: 30px;
            border-bottom: 1px solid black;
            padding: 2px 20px;
            font-size: 14px;
        }
        .city>input{
            width: 80px;
            outline: none;
            padding: 0 4px;
            color: silver;
        }
        #btn{
            width: 40px;
            padding: 1px;
            background-color: white;
            font-size: 10px;
            border: 1px solid silver;
        }
        #current{
            height: 100px;
            line-height: 25px;
            border-bottom: 1px solid black;
            padding: 10px 20px;
            font-size: 14px;
        }
        .weather_day{
            width: 120px;
            height:350px;
            line-height: 35px;
            list-style: none;
            border-right: 1px solid black;
            display: inline-block;
            text-align: center;
            padding: 30px 0;
            font-size: 13px;
            color: #1d1d1d;
        }
        .high{
            color: red;
        }
        .low{
            color: blue;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="city">
       请输入查询城市：<input type="text" id="cityname" value="" placeholder="西安">
        <button id="btn">确定</button>
    </div>
    <div id="current">
        当前城市：<span></span><br>
        此刻温度：<span></span><br>
        友情提示：<span></span>
    </div>
    <div id="weather">
        <ul>
            <li class="weather_day">
                日期：<span></span><br>
                风力：<span></span><br>
                风向：<span></span><br>
                <span>高温</span><br>
                <span>低温</span><br>
                天气：<span></span>
            </li>
            <li class="weather_day" style="width: 170px">
                日期：<span></span><br>
                风力：<span></span><br>
                风向：<span></span><br>
                <span class="high">高温</span><br>
                <span class="low">低温</span><br>
                天气：<span></span>
            </li>
            <li class="weather_day">
                日期：<span></span><br>
                风力：<span></span><br>
                风向：<span></span><br>
                <span>高温</span><br>
                <span>低温</span><br>
                天气：<span></span>
            </li>
            <li class="weather_day">
                日期：<span></span><br>
                风力：<span></span><br>
                风向：<span></span><br>
                <span>高温</span><br>
                <span>低温</span><br>
                天气：<span></span>
            </li>
            <li class="weather_day">
            日期：<span></span><br>
            风力：<span></span><br>
            风向：<span></span><br>
            <span>高温</span><br>
            <span>低温</span><br>
            天气：<span></span>
            </li>
            <li class="weather_day" style="border: none;">
                日期：<span></span><br>
                风力：<span></span><br>
                风向：<span></span><br>
                <span>高温</span><br>
                <span>低温</span><br>
                天气：<span></span>
            </li>
        </ul>
    </div>
</div>
<script src="js/jquery-3.0.0.js"></script>
<script>
    $(function(){
        ajax("西安");
        $("#cityname").bind('blur',function(){
            ajax("西安");
        }).focus(function(){
            $("#cityname").unbind('blur').attr("placeholder","");
            $("#btn").click(function(){
                var cityname=$("#cityname").val();
                ajax(cityname);
            });
        });
        //ajax封装
        function ajax(cityname) {
            $.ajax({
                url:"https://www.apiopen.top/weatherApi",
                type:"post",
                dataType:"JSON",
                data:{"city":cityname},
                success:function(response){
                    $("#cityname").css({color:"black"}),
                        console.log(response);
                    //绑定当前城市温度
                    var cur=$("#current").find("span");
                    cur.eq(0).html(response.data.city);
                    cur.eq(1).html(response.data.wendu+"<sup>&deg;</sup>C");
                    cur.eq(2).html(response.data.ganmao);

                    //绑定日期温度
                    for(var i=0;i<6;i++){
                        var wear=$("#weather").find(".weather_day").eq(i).find("span");//span
                        if(i>0){
                            var resp=response.data.forecast[(i-1)]; //数据数组
                            //console.log(resp);
                            wear.eq(0).html(resp.date);
wear.eq(1).html(resp.fengli.split("[")[2].split("]")[0]);
                            wear.eq(2).html(resp.fengxiang);
                            wear.eq(3).html(resp.high);
                            wear.eq(4).html(resp.low);
                            wear.eq(5).html(resp.type);
                        }else {
                            var yes=response.data.yesterday;
                            wear.eq(0).html(yes.date);        wear.eq(1).html(yes.fl.split("[")[2].split("]")[0]);
                            wear.eq(2).html(yes.fx);
                            wear.eq(3).html(yes.high);
                            wear.eq(4).html(yes.low);
                            wear.eq(5).html(yes.type);
                        }
                    }

                }
            })
        }
});
</script>
</body>
</html>

四十二、jQuery的ajax请求

猜你喜欢