jsonp/ajax 自己的一些总结
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。
jsonp/ajax 自己的一些总结的更多相关文章
- jq+jsonp+ajax解决跨域问题
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike.baidu.com/ ...
- jsonp Ajax跨域请求
什么是JSONP? JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域 ...
- PHP jsonp ajax 跨域 实例
HTML代码 <html> <head> <title>跨域测试</title> <script src="http://code.jq ...
- json与jsonp ajax
今天在网上找了一下资料,发现这篇文章总结得好,果断转了:http://blog.csdn.net/superhosts/article/details/9057301
- jquery的ajax和jsonp的写法
交互 ajax jsonp ajax跟之前一模一样 $(document).ready(function(){ $.ajax({ url:'get.php', ...
- JSONP解决ajax跨域问题
在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested r ...
- 使用jsonp实现ajax跨域请求
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example.com 的网页无法 ...
- C# WebClient、jQuery ajax jsonp实现跨域
WebClient 无传输数据获取 Uri uri = new Uri(allURL); WebClient wc = new WebClient(); wc.Encoding = System.Te ...
- jQuery的ajax跨域 Jsonp原理
1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...
随机推荐
- Vsual Studio 高版本打开低版本项目的方法
https://www.cnblogs.com/jmliao/p/5594179.html
- ASP.NET 常用的字符串加密
字符串常用的加密有三种 1.MD5加密,这个常用于密码,单向加密,不可解密,有些在线解密的可以解大部份,用代码不能实现,如果不想让人解密,加密后随便截取一段就好了: 2.Base64位加密,通常加密后 ...
- nginx 托管.net core的service文件
在 /etc/systemd/system/ 中新建一个服务文件site1.service vim /etc/systemd/system/site1.service [Unit] Descripti ...
- UWP开发入门(三)——{x:Bind}扩展标记
上周打炉石打得太晚……忘记更新了,本周补上.本篇我们讲一下{x:Bind}扩展标记.{x:Bind}扩展标记也是Windows 10 Uinversal 新增的内容,按官方的说法是 {Binding} ...
- brew安装指定版本boost
brew 如何安装指定版本的boost brew uninstall boost brew install boost@1.57 brew link boost@1.57 --force --over ...
- 自己的Java规范文档
参考阿里Java规范文档 不建议使用过时方法 泛型需要加上<>,这种方式创建的对象是不推荐的. Map object = new HashMap();//禁止使用 字符串比较时,不需要大小 ...
- 关于mysql中[Err] 1451 -Cannot delete or update a parent row: a foreign key constraint fails
mysql> SET FOREIGN_KEY_CHECKS = 0; Query OK, 0 rows affected (0.02 sec) mysql> delete from r ...
- A - 畅通工程 (并查集)
点击打开链接 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府"畅通工程"的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连 ...
- Bootstrap Table使用方法详解
http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...
- 总结day04 ---- 列表的切片,增删改查,以及,相关方法, 元祖的使用方法
内容大纲 1 : 列表的索引 : 列表的切片 2 : 列表的增加内容 >1:append(char) >2:insert(index,char) >3:extend('可迭代对象' ...