飞行的猪哼哼

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
黑马程序员---ajax请求

一：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">
    <!-- 如果点击搜索按钮，激发search函数 -->
    <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">
    <!-- 如果点击搜索按钮，激发search函数 -->
    <input type="button" value="搜索" id="btn01" onclick="search();">
    <ul id="content"></ul>

</body>

</html>
posted on 2020-08-14 18:02  飞行的猪哼哼  阅读(56)  评论(0)    收藏  举报