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 ...
随机推荐
- daylyknowledge1
1.数据库截取字符串:toFixed():四舍五入substring(cp_introduce,0,11) cp_introduce前台截取: field: 'an_content', title: ...
- asp.net——上传图片生成缩略图
上传图片生成缩略图,原图和缩略图地址一样的时候缩略图会把原图覆盖掉 /// <summary> /// 生成缩略图 /// </summary> /// <param n ...
- 1-初步了解C#-语言基础
本篇博客对应视频讲解 前言 终于开始讲语言了,我选择讲C#.为什么呢?因为C#是很好的入门语言,简洁.全面,面向对象类型安全,开发体验好,上手容易.而其他的语言也已经有人讲了很多了,C#相对来说要少一 ...
- Linux的思维导图
- Linux Kill 无法关闭进程
Kill -signal Process# signal 表示kill命令给进程发送的信号 Kill命令实际上执行的动作,是给进程发送信号,常用: INT 2 这个就是你在bash下面用Ctrl+C ...
- LOJ#3085. 「GXOI / GZOI2019」特技飞行(KDtree+坐标系变换)
题面 传送门 前置芝士 请确定您会曼哈顿距离和切比雪夫距离之间的转换,以及\(KDtree\)对切比雪夫距离的操作 题解 我们发现\(AB\)和\(C\)没有任何关系,所以关于\(C\)可以直接暴力数 ...
- hadoop1.0.4运行程序出现“Java heap Space”错误
根据虾皮博客中教程,成功搭建了一个12台电脑的Hadoop云平台,而且成功运行了软件自带的wordcount程序,处理10M数据. 但是当程序处理40M时候,却出错了.出错提示“Java Heap S ...
- mysql 主从错误以及监控
同步中的常见的错误和处理 1.现象:在从库上面show slave status\G;出现下列情况, Slave_IO_Running: Yes Slave_S ...
- 苹果隐私条例更新:收集用户电话和 Email 数据
简评:苹果现在会收集用户的电话和电子邮件,作为用户「信任评级」的一部分,我还是支持的,因为园长被黑产攻击 AppleID,直接刷爆了我的卡!但是在大环境看,隐私已经不存在了. Apple 最近悄悄为 ...
- npm 常用配置
npm config list/ls 显示配置信息npm config list/ls -l 更详细npm -h 显示帮助信息,建议多查看npm -l display full usage info ...