JQuery ajax---使用心得

最新推荐文章于 2021-08-05 14:44:48 发布

weixin_40624809

最新推荐文章于 2021-08-05 14:44:48 发布

阅读量105

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/weixin_40624809/article/details/102898235

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先配置好Apache服务器
HTML文件要在文件目录下
编写HTML文件`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
    <style>   </style>
</head>
<body>
    <div> </div>
    <button id="btn">btn</button>
    <script>
        $(function(){
            window.onload = function(){
                var btn = document.getElementById('btn')
                btn.onclick = function(){
                    $.ajax({
                        type:"GET",
                        url:"data.json",
                        data:"",
                        success:function(msg){
                            console.log(msg);
                            console.log(msg[0].name);
                            console.log(msg[1]);
                            console.log(msg[2]);
                            console.log(msg[3]);
                            // console.log(typeof(msg));
                        },
                        error:function(msg){
                            alert(xhr.status)
                        }
                    })
                }
            }
        })
    </script>
</body>

</html>

 data.json 文件

[
    {
        "name":"lisa",
        "age":18,
        "habit":"dance"
    },
    {
        "name":"jennie",
        "age":20,
        "habit":"sing"
    },
    {
        "name":"rose",
        "age":19,
        "habit":"sing+1"
    },
    {
        "name":"jisoo",
        "age":18,
        "habit":"smile"
    }
]