ajax 访问本地数据以及跨域访问数据的写法

最新推荐文章于 2023-03-24 17:40:22 发布

new 前端

最新推荐文章于 2023-03-24 17:40:22 发布

阅读量939

点赞数 1

分类专栏： JavaScript 文章标签： josn ajax

版权与解释权归本博客博主所有转载请注明出处，否则追究其法律责任！

本文链接：https://blog.csdn.net/qq_36131502/article/details/90519224

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

ajax的本地访问数据的写法，

<script>
        //这是leve 11  的写法
        // var ajax = new XMLHttpRequest();
        // var url = "./xiaohua.json"
        // ajax.open("get",url,true);
        // ajax.onreadystatechange = function(){
        //     if(ajax.readyState ==4){
        //         if(ajax.status ==200){
        //             console.log(JSON.parse(ajax.responseText));
        //         }
        //     }
        // }

        // ajax.send();

        //还有就是leve   12的写法

        var ajax = new XMLHttpRequest();

        var url = "./xiaohua.json";
        ajax.open("get", url, true);
        ajax.onload = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                console.log(ajax.responseText);
            } else {
                console.log("您访问失败哦");
                JSON.p

            }


        }
        ajax.send();
    </script>

JSONP：只支持GET，不支持POST请求

JSONP原理

<body>
    <input type="text" name="" id="">
    <ul></ul>



    <script>
        var val1 = document.getElementsByTagName('input')[0];

        val1.onkeyup = function () {
          var  val = val1.value;
            var ajax = document.createElement('script');
            ajax.src =
                `https://suggest.taobao.com/sug?code=utf-8&q=${val}&_ksTS=1565073513811_1727&callback=jsonp1728`
            document.body.append(ajax)

        }

        function jsonp1728(data) {
            var ul =document.getElementsByTagName('ul')[0];
                ul.innerHTML = ''
                data.result.forEach(item => {
                    var li = document.createElement('li');
                        li.innerHTML = item[0];
                        ul.append(li);
                });  
           
                console.log(data.result);

            }
    </script>

原理为，创建一个script，用src去访问，没有跨域问题，再用一个一个回调函数接收数据。

如果没有回调函数。

就用jqurey去访问。

 <script>
            // 获取标签对象：快递公司
            var $selector=$("#company");
            // 获取快递单号
            var $postid=$("#postid");
            // 查询
            var $cx=$("#cx");

            // 给查询按钮添加点击事件
            $cx.click(function(){
                // 获取需要的数据
                var $company = $selector.val();
                var $value = $postid.val();

                // ajax 获取数据
                $.ajax({
                    url:"https://sp0.baidu.com/9_Q4sjW91Qh3otqbppnN2DJv/pae/channel/data/asyncqury?cb=?",
                    type:"get",
                    data:{c :$company,nu:$value,appid:4001},
                    dataType:"json",
                    jsonpCallback:"success",
                    success:function(msg){
                        // 清空历史消息
                        $("#show").empty();

                        // 获取接口返回的数据
                        console.log(msg);
                        var $info = msg.data.info.context;

                        // 循环遍历数据
                        for(var i = 0; i <$info.length;i++){
                            // 获取每一笔的时间信息
                            var $time = $info[i].time;
                            $time = getTimeStr($time);

                            // 获取每一笔的快递信息
                            var $desc = $info[i].desc;

                            // 创建标签，添加到页面中
                            var $msg = $("<p>").text($time + ":" + $desc);
                            var $i = $("<i>");

                            var $kd = $("<li>");
                            $kd.append($i).append($msg);
                            // 添加到页面中
                            $("#show").append($kd);
                        } 


                    },
                    error:function(){
                        console.log("系统繁忙，查询失败");
                    }
                });
            });

            // 获取时间字符串
            function getTimeStr(dt){
                var _date = new Date(parseInt(dt*1000));
                return _date.getFullYear() + "-" + (_date.getMonth() + 1) + "-" + _date.getDate() + " " + _date.getHours() + ":" + _date.getMinutes() + ":" + _date.getSeconds();


            }
        </script>

new 前端

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
ajax 访问本地数据以及跨域访问数据的写法

ajax的本地访问数据的写法，<script> //这是leve 11 的写法 // var ajax = new XMLHttpRequest(); // var url = "./xiaohua.json" // ajax.open("get",url,true); // ajax.onread...
复制链接

扫一扫