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 自己的一些总结的更多相关文章

  1. jq+jsonp+ajax解决跨域问题

    Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike.baidu.com/ ...

  2. jsonp Ajax跨域请求

    什么是JSONP? JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域 ...

  3. PHP jsonp ajax 跨域 实例

    HTML代码 <html> <head> <title>跨域测试</title> <script src="http://code.jq ...

  4. json与jsonp ajax

    今天在网上找了一下资料,发现这篇文章总结得好,果断转了:http://blog.csdn.net/superhosts/article/details/9057301

  5. jquery的ajax和jsonp的写法

    交互 ajax jsonp ajax跟之前一模一样 $(document).ready(function(){     $.ajax({         url:'get.php',         ...

  6. JSONP解决ajax跨域问题

    在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested r ...

  7. 使用jsonp实现ajax跨域请求

    Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example.com 的网页无法 ...

  8. C# WebClient、jQuery ajax jsonp实现跨域

    WebClient 无传输数据获取 Uri uri = new Uri(allURL); WebClient wc = new WebClient(); wc.Encoding = System.Te ...

  9. jQuery的ajax跨域 Jsonp原理

    1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...

随机推荐

  1. WPF Path 画箭头

    代码: <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.c ...

  2. LightOJ 1138 Trailing Zeroes (III)(二分 + 思维)

    http://lightoj.com/volume_showproblem.php?problem=1138 Trailing Zeroes (III) Time Limit:2000MS     M ...

  3. form 认证 读取

    class Program { public static CookieContainer cc { get; set; } static void Main(string[] args) { str ...

  4. python+pcap+dpkt抓包小实例

    通过pcap与dpkt抓包解包示例: #!/usr/bin/env python # -*- coding: utf-8 -*- """ 网络数据包捕获与分析程序 &qu ...

  5. 操作mysql的指令

    1,通过ip,端口,用户名,密码登陆数据 命令格式为:mysql -h ip -u root -p -P 3306例如:mysql -h 127.0.0.1 -u root -p -P 3306 2, ...

  6. Python读取mdb文件以及shell检测

    最近写了两个python的脚本不过实际意义不是很大,就是想练练python写程序,一直研究web方面脚本写的少多了,还有C语言也用的少多了.现在有时间得多写写程序,别把以前学到的知识给忘了. 作者: ...

  7. canvas绘制五角星详细过程

    canvas绘制 <canvas id="straight"></canvas> <script> var canvas = document. ...

  8. linux安装spark-2.3.0集群

    (安装spark集群的前提是服务器已经配置了jdk并且安装hadoop集群(主要是hdfs)并正常启动,hadoop集群安装可参考<hadoop集群搭建(hdfs)>) 1.配置scala ...

  9. VS中工程的“依赖”,“库目录”,“包含目录”

    写多了Vs中的工程,就会遇到很多环境配置问题,例如“依赖项”,“库目录”,“包含目录”等等等等. 今天要记录的就是这些的基本含义:我们拿一个例子来看,更加清晰易懂一些: 例如在Opencv3.0+VS ...

  10. day01 --class --home

    # 1.简述变量命名规范# 2.name = input(“>>>”) name变量是什么数据类型?# 3.if条件语句的基本结构? # 4.用print打印出下面内容:# ⽂能提笔 ...