jsonp/ajax 自己的一些总结

时间：2024-01-05 13:00:37
data.json代码：[{"name": "张三", "age": 18}, {"name": "李四", "age": 18}, {"name": "王五", "age": 19}]
html代码：<ul>
          <li v-for="item in newData">
            {{item.name}}{{item.age}}
          </li>
         </ul>
js代码：var app = new Vue({
    "el": "#app",
    data: function () {
        var newData = '';
        $.ajax({
            url: "./data.json",
 async:false,
            type: "get",
            dataType: "json",
            catch: false,
            success: function (data) {
                newData = data;
                console.log(typeof newData);
            }
        });
        return {
            newData: newData
        }
    }
});

这是自己写的一个小vue例子，想用vue的v-for循环绑定数据，中间出了很多问题，总结：

1.一开始ajax请求里没写代码中标红的一行，结果页面上就是不出现，加了他就出现，忽然明白ajax默认异步请求，数据还没请求过来就绑定上去，肯定不行啊，所以异步请求要谨慎，还是要研究一下里面的每个参数啊，需要传数据还要加上data选项，它是发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。如下。

2.找了一个豆瓣的开放接口：https://api.douban.com/v2/book/search，ajax请求需要传参数就要这样：

    function handleResponse(data) {
        console.log(2);
    }
    $.ajax({

                async : true,

                url : "https://api.douban.com/v2/book/search",

                type : "GET",

                dataType : "jsonp", // 返回的数据类型，设置为JSONP方式

                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback（感觉不重要，不用写）

                jsonpCallback: 'handleResponse', //设置回调函数名（感觉这个是传给服务端函数名，服务器会根据你传过来的函数名，把你请求的数据放在这个函数的形参里，你前台定义这个函数并且在函数里处理这个函数就可以了，先执行这个函数，再执行success函数）
data : { q : "java", count : 1 }, success: function(response, status, xhr){ console.log('状态为：' + status + ',状态是：' + xhr.statusText); console.log(response); } });
如果指定了 script 或者 jsonp 类型，那么当从服务器接收到数据时，实际上是用了 <script> 标签而不是 XMLHttpRequest 对象。这种情况下，$.ajax() 不再返回一个 XMLHttpRequest 对象，并且也不会传递事件处理函数，比如 beforeSend。
默认情况下，请求总会被发出去，但浏览器有可能从它的缓存中调取数据。要禁止使用缓存的结果，可以设置 cache 参数为 false。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置 ifModified 为 true。也就是在ajax（）的参数里加一行ifModified:true。

相关文章