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数据是一种经型的实时数据交互的数据存储方法,使用到最 ...
随机推荐
- python之xlwt
python写excel----xlwt 写excel的拿点不在构造一个workbook的本身,二是填充的数据,不过这不在范围内,在写excel的操作中也有棘手的问题, 比如写入合并的单元格就是比较麻 ...
- 如何使用flask将模型部署为服务
在某些场景下,我们需要将机器学习或者深度学习模型部署为服务给其它地方调用,本文接下来就讲解使用python的flask部署服务的基本过程. 1. 加载保存好的模型 为了方便起见,这里我们就使用简单的分 ...
- 本地Markdown上传图片
本地Markdown上传图片 1.上传本地markdown文件到博客园 使用工具pycnblog 下载:https://github.com/dongfanger/PyCnblog 查看READ ME ...
- SQL中那么多函数，Java8为什么还要提供重复的Stream方法，多此一举？
有个同学提出一个这样的疑问; 在业务系统中,数据一般都从sql中查询,类似使用where,order by,limit,聚合函数等,为什么还要用java8的Stream方法? 对这个问题,大家有什么见 ...
- traefik： 基础入门总结
traefik介绍 traefik-现代反向代理,也可称为现代边缘路由:traefik原声兼容主流集群,Kubernetes,Docker,AWS等.官方的定位traefik是一个让开发人员将时间花费 ...
- Git-【技术干货】工作中Git的使用实践
Git-[技术干货]工作中Git的使用实践 置顶 2019-09-17 21:02:16 web洋仔 阅读数 11444更多 分类专栏: Git 版权声明:本文为博主原创文章,遵循CC 4.0 B ...
- 惊奇发现KEIL也可以C++编译了
在Github上面浏览下载的一个工程,可以用KEIL打开,但是我竟然找不到mian函数.找了一圈发现是用到了面向对象的编程方法,那就必须支持C++,他怎么实现的呢? 看配置工程:明显的一个不一样 -- ...
- stm32中关于NVIC_SetVectorTable函数使用的疑惑与理解
[转载]2017年12月4日14:48:29 先描述下这几天碰到的一个奇怪的问题: 一个基于stm32的工程中使用到了IAP编程,其中boot空间预留长度为0x6100,实际boot的bin文件大小为 ...
- 记一次 .NET 某三甲医院HIS系统 内存暴涨分析
一:背景 1. 讲故事 前几天有位朋友加wx说他的程序遭遇了内存暴涨,求助如何分析? 和这位朋友聊下来,这个dump也是取自一个HIS系统,如朋友所说我这真的是和医院杠上了,这样也好,给自己攒点资源, ...
- 解决element-ui el-input输入框内容无法修改的问题
wqy的笔记:http://www.upwqy.com/details/271.html el-input 中 使用 :value 时 input输入的内容无法修改 <el-input : ...