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数据是一种经型的实时数据交互的数据存储方法,使用到最 ...
随机推荐
- linux 查看运行java所在目录
通过ps及top命令查看进程信息时,只能查到相对路径,查不到的进程的详细信息 需要查看pos_service.jar的绝对路径(在哪里目录下) 使用:ll /proc/PID Linux在启动一个进 ...
- 改善c++程序的150个建议（读后总结）-------0-9
0. 不要让main 函数返回 void 入口函数main()返回类型应该为 int, 即程序结束时return 0 表示程序正常返回,函数结束时 return -1 值表示程序异常返回, 如果不显式 ...
- Python正则表达式的七个使用范例
本文由 伯乐在线 - 左手的灵魂 翻译.未经许可,禁止转载!英文出处:thegeekstuff.欢迎加入翻译组.http://blog.jobbole.com/74844/ 作为一个概念而言,正则表达 ...
- Arduino杀手在此！！ESP 8266 NodeMCU小白手把手入门（二）（解惑篇）
上一次更新主要是简单介绍了NodeMCU的基本知识并且进行了一次简单的实操演示,最近有一些读者向我提出了一些小问题,所以决定出一期解惑篇,主要针对的是基础知识不是太牢固,或是喜欢刨根问底的小可爱们.里 ...
- cka 英文考试题
## CKA真题解析 #### 1**Set configuration context $kubectl config use-context k8s. Monitor the logs of Po ...
- CSS 重置技术
元素默认样式显示问题 每个浏览器对不同元素都有自己的默认样式.Google Chrome 渲染正文标题.段落.列表等,与 IE 浏览器可能都有所不同.这就导致同一个页面元素在不同的浏览器中显示效果不一 ...
- SpringMVC Web 相对路径与绝对路径
基本概念 绝对路径 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径) 例如: C:\xyz\test.txt 代表了 test.txt 文件的绝对路径. http://www ...
- fprintf函数
描述 C 库函数 int fprintf(FILE *stream, const char *format, ...) 发送格式化输出到流 stream 中. 声明 下面是 fprintf() 函数的 ...
- JDBC使用详解
第1章:JDBC概述 1.1 数据的持久化 持久化(persistence):把数据保存到可掉电式存储设备中以供之后使用.大多数情况下,特别是企业级应用,数据持久化意味着将内存中的数据保存到硬盘上加以 ...
- uni-app 富文本解析-小程序
原文:http://www.upwqy.com/manual/info/105.html 1 引入插件 gaoyia-parse 链接:https://pan.baidu.com/s/1UusfXxH ...