ajax获取json数据示例

最新推荐文章于 2023-10-03 15:44:05 发布

boboj1

最新推荐文章于 2023-10-03 15:44:05 发布

阅读量2.1k

点赞数 3

分类专栏： AJAX 文章标签： ajax json

本文链接：https://blog.csdn.net/Wind_AN/article/details/117264191

版权

AJAX 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用ajax请求数据时，可以先封装ajax

function querystring(obj) {
    var str = "";
    for (var arr in obj) {
        str += arr + "=" + obj[arr] + "&";
    }
    return str.substring(0, str.length - 1);
}


function $ajax({
    method = "get",
    url,
    data,
    success,
    error,
}) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (error) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    if (method == "get" && data != null) {
        url += "?" + querystring(data);
    }
    xhr.open(method, url, true);

    if (method == "get") {
        xhr.send();
    } else {
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
        xhr.send(querystring(data));
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                if (success) {
                    success(xhr.responseText);
                }
            } else {
                if (error) {
                    error("error" + xhr.status);
                }
            }
        }
    }
}

请求的数据book.json

{
    "data":[
        {
            "name":"first",
            "desc":"1111111111111111"
        },
        {
            "name":"second",
            "desc":"222222222222222"
        },
        {
            "name":"third",
            "desc":"333333333333333"
        }
    ]
}

两种方法将获取的数据显示在ul中
两种方式选取一种，另一种运行时删除

<body>
    <button id="xiazai">下载数据</button>
    <ul id="liebiao">
        <!-- <li>
            <h1>标题：</h1>
            <p>简介：</p>
        </li> -->
    </ul>
    <script src="ajax.js"></script>
    <script>
        window.onload = function() {
            var button = document.getElementById("xiazai");
            var ul = document.getElementById("liebiao");

            /* 第一种方式 */
            button.onclick = function() {
                $ajax({
                    method: "get",
                    url: "data/book.json",
                    success: function(res) {
                        var str = ``;
                        var obj = JSON.parse(res);
                        var arr = obj.data;
                        for(var i = 0;i < arr.length;i ++) {
                            var lobj = arr[i];
                            str += `<li>
                                        <h1>标题：${lobj.name}</h1>
                                        <p>简介：${lobj.desc}</p>
                                    </li>`;
                        }
                        ul.innerHTML = str; 
                    },
                    error: function(mes) {
                        alert(error);
                    }
                })
            }

            /* 第二种方式 */

            button.onclick = function() {
                ul.innerHTML = "";
                $ajax({
                    method: "get",
                    url: "data/book.json",
                    success: function(res) {
                        var obj = JSON.parse(res);
                        var arr = obj.data;
                        for(var i = 0;i < arr.length;i ++) {
                            var h1 = document.createElement("h1");
                            var p = document.createElement("p");
                            var li = document.createElement("li");
                            h1.innerHTML = arr[i].name;
                            p.innerHTML = arr[i].desc;
                            li.appendChild(h1);
                            li.appendChild(p);
                            ul.appendChild(li);
                        }
                    },
                    error: function(error) {
                        alert(error)
                    }
                })
            }
            /* 第二种结束 */
        }
    </script>
</body>

boboj1

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
ajax获取json数据示例

使用ajax请求数据时，可以先封装ajaxfunction querystring(obj) { var str = ""; for (var arr in obj) { str += arr + "=" + obj[arr] + "&"; } return str.substring(0, str.length - 1);}function $ajax({ method = "get", url, data,
复制链接

扫一扫