Ajax 和 JSON
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax&JSON</title>
<!-- <script src="js/jquery-1.12.4.js"></script> -->
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head> <body>
<h3>Ajax&JSON</h3>
<button onclick="getData()">获取数据</button>
<div id="app">
<router-view></router-view>
</div>
<!-- 主页 -->
<template id="home">
<div>
<h3>我是主页</h3>
<ul>
<li v-for="(item, index) in users" v-text='item.name'></li>
</ul>
</div>
</template>
<script>
// 获取user.json中的数组，把人名循环展示在页面中
var home = Vue.component('home', {
template: '#home',
data() {
return {
users: []
};
},
mounted() { // 在组件或者实例中的数据挂载完毕之后执行的函数
// 获取数据，改变data中的变量
// 把当前组件的this赋值给一个变量
var that = this;
fetch('data/user.json', {
method: 'get'
}).then(function (r) {
// return r.text(); //获取的数据变为text形式
return r.json(); // 直接把JSON数据变成js对象
}).then(function (res) {
// r.json()
that.users = res.list;
// r.text()
// text形式通过Json.parse转换成json数据
// console.log('请求成功：', JSON.parse(res).list);
// that.users = JSON.parse(res).list; });
}
});
</script> <script>
var router = new VueRouter({
routes: [
{
path: '/',
name: '主页',
component: home
}
]
});
var vm = new Vue({
el: '#app',
router
}); function getData() {
// fetch(地址，配置对象).then(处理数据函数).then(接收返回值函数)
fetch('abc.txt', {
method: 'get',
// body:{} 使用post方式时，可以传递参数
}).then(function (r) {
// 数据的处理方式 json() text()
return r.text();
}).then(function (res) {
// 接收返回值，后续的操作
console.log('请求成功：', res);
});
} // jQuery：请求地址，请求方式，发送的数据，接收返回值
$.ajax({
url: 'abc111.txt', // 请求地址
type: 'get', // 请求方式（类型）
data: '', // 要发送的数据
success(data) { // 请求成功时执行的函数，形参就是获取的数据
console.log('请求成功：', data);
// 改变页面操作可以写在这里
},
error(err) { // 请求出错时执行的函数，形参是错误信息
console.log('请求出错：', err);
}
}); // 1.创建对象 XMLHttpRequest()
var xhr = new XMLHttpRequest();
// 2.连接服务器，配置参数，（请求方式，请求地址，同异步）
xhr.open('get', 'abc.txt', true);
// 3.发送数据
xhr.send(); // 如果是读取本地文件，可以设置为空
// 4.监听事件，接收返回的数据，改变页面
xhr.onreadystatechange = function () {
// 同时满步骤4和状态码为200时
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('请求成功：', xhr.responseText);
// 这里可以改变页面内容了
}
}
</script>
</body> </html>
1.关于fetch请求方法
fetch和ajax 的主要区别
1、fetch()返回的promise将不会拒绝http的错误状态，即使响应是一个HTTP 404或者500
2、在默认情况下 fetch不会接受或者发送cookies
Ajax 和 JSON的更多相关文章
- ASP.NET 5 - $.ajax post JSON.stringify(para) is null
JavaScript 代码: var para = {}; para.id = $("#ad-text-id").val(); para.title = $("#ad-t ...
- qt qml ajax 获取 json 天气数据示例
依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...
- ajax将json写到table中去
查询条件: <table style="width: 100%;border-collapse: collapse;" > <tr> <th styl ...
- ajax获取json对象
ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...
- Ajax与json在前后端中的细节解惑
ajax请求JSON Thinkphp中对是否为Ajax的判断,在TP3.2开发手册中有这么一段:“需要注意的是,如果使用的是ThinkAjax或者自己写的Ajax类库的话,需要在表单里面添加一个隐藏 ...
- Ajax与Json的一些总结
Ajax与Json AJAX=异步javaScript 和XML AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不 ...
- ajax返回JSON时的处理方式
JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). json_encode() 该函数主要用来将数组和对象, ...
- JQuery处理json与ajax返回JSON实例
一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内 ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- [Javascript,JSON] JQuery处理json与ajax返回JSON实例
转自:http://www.php100.com/html/program/jquery/2013/0905/5912.html [导读] json数据是一种经型的实时数据交互的数据存储方法,使用到最 ...
随机推荐
- featuretools的几个高级特性
摘要:记录工作中用到的featuretools的部分高级特性. 1.防止信息泄露 在调用dfs时,将主表的观测时间列连同id列作为cutoff_time,可以在构造特征时自动将子表中在cutoff_t ...
- Python JWT 介绍
Python JWT 介绍 目录 Python JWT 介绍 1. JWT 介绍 2. JWT 创建 token 2.1 JWT 生成原理 2.2 JWT 校验 token 原理 3. 代码实现 4. ...
- Identity Server4 数据迁移、持久化
add-migration InitialPersistedGrantDb -c PersistedGrantDbContext -o Migrations/IdentityServer/Persis ...
- KeUserModeCallback函数
内核调用用户 正常的系统调用过程为Ring3->Ring0->Ring3,而KeUserModeCallback提供了一种Ring0->Ring3->Ring0的方式,即从内核 ...
- FROM-4-TO-6!!!!!!!!! - OO第二单元总结
电梯的这三次作业是对并发编程的一次管窥,感觉收获还是蛮多的.在设计上有好的地方也有不足,这里简单回顾总结一下 设计总述 电梯这个问题由于比较贴近真实生活,所以需求还是很好理解的.总的来说,我的数据处理 ...
- 并发王者课 - 青铜 2：峡谷笔记 - 简单认识Java中的线程
在前面的<兵分三路:如何创建多线程>文章中,我们已经通过Thread和Runnable直观地了解如何在Java中创建一个线程,相信你已经有了一定的体感.在本篇文章中,我们将基于前面的示例代 ...
- Nifi：nifi内置处理器Processor的开发
本篇主要是介绍自定义处理器的开发方式及Nifi处理器开发的一些细节 Nifi-Processor自定义开发的流程 之前说过,大部分的数据处理,我们可以基于ExcuseGroovyScript处理器,编 ...
- MergingSort
递归排序的两种实现 <script type="text/javascript"> //归并排序(递归实现) //思想:堆排序利用了完全二叉树的性质,但是比较麻烦 // ...
- ubuntu查看已安装软件包信息的方法
ubuntu查看已安装软件包信息的方法原创fang141x 最后发布于2019-04-15 10:41:34 阅读数 2802 收藏展开简介ubuntu下面是使用dpkg来管理和安装软件包的,对应ce ...
- openstack创建vlan网络并配置网络设备
1.在管理员-->网络-->创建网络. 2.填写网络信息,这里要划分新的VLAN,注意在物理网络中填写的事VLAN,段ID指的是vlan的id 3.创建的网络. 4.创建子网,在里面修改子 ...