黑马程序员---ajax请求

男娘i 2022-11-27 08:58 134阅读 0赞

一：ajax请求的常规写法：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ajax请求</title>
        <script src="js/jquery-2.1.1.min.js"></script>
        <script>
            //函数不需要$(function(){}),因为ajax请求是在页面加载完成之后才执行的。
    
            function search(){
        
                //定义input01文本对象
                var $text = $("#input01");
                //获取input01里面的数据
                var input_str = $text.val();
    
                //创建js对象
                var oPar = {
        
                    //1:url请求地址
                    url: "http://ttapi.research.itcast.cn/app/v1_0/search?q="+input_str,
                    //2：请求的方式
                    type:"GET",
                    //3：返回的数据类型
                    dataType:"JSON",
                    //4:传过去的数据，默认没有。
    
                    //5:请求成功之后调用的函数
                    //住：请求发送过去是个js对象，返回是个json格式的数据，但是json会自动将json格式的对象转换成js对象。
                    //所以会收到js对象。
                    success:function(response){
        
                        // console.log(response);
                        //response.data.results是个数组
                        var res_array = response.data.results;
                        //定义 一个按钮对象
                        var $ul = $("#content");
                        //先清空上次传送过来的数据
                        $ul.html("")
                        //循环遍历数组里面的内容
                        for(var i=0; i<res_array.length;i++){
        
                            //将内容增加在无序列表中。
                            $ul.append("<li>"+res_array[i].title+"</li>")
                        }
                    },
                    error:function(){
        
                        alert("请求失败，请稍后再试");
                    },
                    async:true
                }
                //ajax需要传一个参数，参数里面是js对象。
                $.ajax(oPar);
            }
        </script>
    </head>
    <body>
    
        <input type="text" id="input01">
        
        <input type="button" value="搜索" id="btn01" onclick="search();">
        <ul id="content"></ul>
    
    </body>
    </html>

二：ajax的简写：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ajax请求的简写</title>
        <script src="js/jquery-2.1.1.min.js"></script>
        <script>
            //函数不需要$(function(){}),因为ajax请求是在页面加载完成之后才执行的。
            function search() {
        
    
                //定义input01文本对象
                var $text = $("#input01");
                //获取input01里面的数据
                var input_str = $text.val();
                $.get("http://ttapi.research.itcast.cn/app/v1_0/search?q=" + input_str, function (response) {
        
                    // console.log(response);
                    //response.data.results是个数组
                    var res_array = response.data.results;
                    //定义 一个按钮对象
                    var $ul = $("#content");
                    //先清空上次传送过来的数据
                    $ul.html("")
                    //循环遍历数组里面的内容
                    for (var i = 0; i < res_array.length; i++) {
        
                        //将内容增加在无序列表中。
                        $ul.append("<li>" + res_array[i].title + "</li>")
                    }
                }).error(function () {
        
                    alert("请求失败，请稍后再试");
                });
            }
        </script>
    </head>
    
    <body>
    
        <input type="text" id="input01">
        
        <input type="button" value="搜索" id="btn01" onclick="search();">
        <ul id="content"></ul>
    
    </body>
    
    </html>