Vue2.X 通过 ajax 获取 API 数据(非 axios)
不多废话,笔记如下
1. javascript:
let vm = new Vue({
el: '#card-text',
data: {
info: ''
},
beforeCreate: function () {
// 这个 _this 现在是指向 vue ,因为是vue调用了 beforeCreate()方法。
// 如果这里不保存,那么this将会在下面的 success() 方法中重置,重置之后是指向调用它的对象,也就是 ajax
let _this = this;
let url = "http://localhost:5000/api/Blog";
$.ajax({
url: url,
dataType: "json",
async: true,
//data:{"id":"value"},
type: "GET",
beforeSend: function () {
},
success: function (req) {
// $(req).each(function (index, item) {
// let abstract = item.abstract;
// let createTime = item.createTime;
// $("#card-text").html(abstract);
// $("#card-time").html(createTime);
// });
_this.info = req;
},
complete: function () {
},
error: function () {
}
})
}
});
2. html:
<div class="row" id=card-text>
<div class="col-md-4" v-for="item in info">
{{item.XXXX}}
</div>
</div>
3. BTW:
1、函数名是一个指向函数的指针。
2、函数执行环境(this什么时候初始化):当某个函数第一次被调用时,会创建一个执行环境,并使用this/arguments和其他命名参数的值来初始化函数的活动对象。
3、初始化指向谁:在Javascript中,this关键字永远都指向函数(方法)的所有者。
Vue2.X 通过 ajax 获取 API 数据(非 axios)的更多相关文章
- ajax获取json数据及实现跨域请求
最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...
- 用ajax获取后台数据,返回json数据,怎么在前台使用?
用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- jquery autocomplete ajax获取动态数据,兼容各浏览器,支持中文
jquery.autocomplete.js经过改动,支持各种浏览器.支持中文输入! 1.效果图例如以下 2.HTML和ajax代码 <!DOCTYPE html> <html xm ...
- JS-利用ajax获取json数据,并传入页面生成动态tab
封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...
- AngularJS学习笔记(3)——通过Ajax获取JSON数据
通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
- Ajax获取接口数据,url拼接参数跳转页面,js获取上一级页面参数给本页面
1.Ajax获取接口数据 function demo(){ //假设请求参数 var requestBody = [{ "name":"zhang", &quo ...
- 十一、React 获取服务器数据: axios插件、 fetch-jsonp插件的使用
react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 一.axios 获取Api数据 使用文档:https://www. ...
- Struts1.x下使用jquery的Ajax获取后台数据
jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法. 前台页面: ...
随机推荐
- uniapp的微信小程序,获取授权,获取中文街道地理位置
w问题描述:在微信小程序模拟器上运行获取坐标时 获取不到信息,原因是 没有调起默认地理位置: 解决办法:或者在manifest.json的源码视图中配置:配置appid和地理位置 默认弹起获取地理位置 ...
- Python是否存在方法方法重载及是否可以不显示声明初始化方法
一.python中是否存在方法重载 对java有了解的程序员都知道,java中存在构造方法重载和普通方法重载,重载指的是方法名相同,参数列表不同的多个方法.python中是否也支持这两种方法重载,测试 ...
- Tomcat 8.5 配置 SSL 证书
前文: 1.以上内容仅支持Linux-Tomcat配置 正文: 说一下我遇到的坑,我使用的服务器是阿里云服务器,阿里云提供的云服务器Tomcat配置SSL是7.0版本,跟8.5出入较大. 以下为阿里提 ...
- python对列表中名字进行修改,在每个名字后面加入‘the Great’
第一种方法:使用enumerate函数 def make_great(magicians): for i ,name in enumerate(magicians): magicians[i] = m ...
- java源码-LinkedHashMap类设计
LinkedHashMap 继承于 hashMap LinkedHashMap .Entry 继承 HashMap.Node 继承 Map.Entry类 LinkedHashMap .Entry 该E ...
- spring boot系列(五)spring boot 配置spring data jpa (查询方法)
接着上面spring boot系列(四)spring boot 配置spring data jpa 保存修改方法继续做查询的测试: 1 创建UserInfo实体类,代码和https://www.cnb ...
- Initializer for conditional binding must have Optional type, not 'String'
今天看到问Swift问题: Initializer for conditional binding must have Optional type, not 'String' 以前没遇到过这个问题, ...
- 【Linux】【一】linux 目录切换、创建目录和文件、编辑目录以及文件(txt)
以下 是在指定目录下创建文件夹目录,以及在该目录下创建txt文件进行编辑,保存. 然后删除相关文件以及目录的命令操作记录. 本操作记录中的命令简单解释: pwd 显示当前路径 ls 显示当前目录下的文 ...
- 2单表CRUD综合样例开发教程
东软集团股份有限公司 基础软件事业部 单表CRUD综合样例开发教程 东软机密 tui 更改履历 版本号 更改时间 更改的 图表和章节号 状态 更改简要描述 更改申 请编号 更改人 批准人 V1.0 2 ...
- RazorSQL for Mac如何编辑数据?
RazorSQL 是一个非开源的功能非常强大数据库查询工具.SQL的编辑.数据库管理工具.支持通过 JDBC 和 ODBC 连接超过 29 种的数据库.允许您从一个数据库工具查询,更新,导航和管理所有 ...