Python24/13jQuery_Advanced/day02/basic02.html at master · ItJava/Python24 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="../../12jQuery_Basic/day01/js/jquery-1.12.4.min.js"></script>
    <script>

        $(function () {

            // ajax的使用, 本地这个html文件请求的话会报错，服务器请求的话才会成功
            // 默认async: 'true',  就是true就是异步处理，实现同时请求和发送数据
            // ajax的优点: 1- 异步 2- 局部刷新
            // 请求同源数据(自己服务器的数据)使用ajax,使用jsonp跨域请求,jquery中ajax()中封装了同源和跨域，都使用ajax的方法
            // 只要协议、域名、端口有任何一个不同，都被当作是不同的域
            function func1() {
                $.ajax({
                    url: "../../12jQuery_Basic/day02/js/myjson.json",
                    type: "get",
                    dataType: "json",   // 同源请求
                    async: 'true',
                    success: function (data) {
                        $(".name").html(data.name)
                        $(".age").html(data.age)
                    },
                    error: function () {
                        alert(2)

                    }
                })
            }

             // json表示同源请求，jsonp表示跨域请求
            function func2() {

                $('input').keyup(function () {

                    var vals = $(this).val()
                    $.ajax({
                        url: "https://sug.so.360.cn/suggest?",
                        type: "post",
                        dataType: "jsonp",
                        data: {
                            'word': vals
                        },
                        success: function (data) {
                            console.log(data);

                            $('ul').empty()
                            var str = ''
                            for (let index = 0; index < data.s.length; index++) {
                                str += "<li>"+ data.s[index] +"</li>"
                            }
                            $("ul").html(str)
                        },
                        error: function (data) {
                            console.log(data);
                            alert("请求失败...")
                        }
                    })
                })
            }

            func2()
        })

    </script>

</head>
<body>
    <!-- ajax的使用 -->
    <div class="name"></div>
    <div class="age"></div>

    <!-- 模拟360请求关键字 -->
    <input type="text">
    <ul></ul>
</body>
</html>