1. 通过 axios 实现数据请求
vue.js 默认没有提供 Ajax 功能的.
所以使用 vue 的时候, 一般都会使用 axios 的插件来实现 Ajax 与后端服务器的数据交互.
注意, axios 本质上就是 JavaScript 的 Ajax 封装, 所以会被同源策略限制.
下载地址:
- https://unpkg.com/axios@0.18.0/dist/axios.js
- https://unpkg.com/axios@0.18.0/dist/axios.min.js
axios 提供发送请求的常用方法有两个: axios.get() 和 axios.post() .
增 post
删 delete
改 put
查 get
- // 发送 get 请求
- // 参数 1: 必填, 字符串, 请求的数据接口的 url 地址, 例如请求地址: http://www.baidu.com?id=200
- // 参数 2: 可选, JSON 对象, 要提供给数据接口的参数
- // 参数 3: 可选, JSON 对象, 请求头信息
- axios.get('服务器的资源地址',{ // http://www.baidu.com
- params:{
参数名:'参数值', // id: 200,
- }
- }).then(function (response) { // 请求成功以后的回调函数
- console.log("请求成功");
- console.log(response);
- }).catch(function (error) { // 请求失败以后的回调函数
- console.log("请求失败");
- console.log(error.response);
- });
- // 发送 post 请求, 参数和使用和 axios.get()一样.
- // 参数 1: 必填, 字符串, 请求的数据接口的 url 地址
- // 参数 2: 必填, JSON 对象, 要提供给数据接口的参数, 如果没有参数, 则必须使用{}
- // 参数 3: 可选, JSON 对象, 请求头信息
- axios.post('服务器的资源地址',{
- username: 'xiaoming',
- password: '123456'
- },{
- responseData:"json",
- })
- .then(function (response) { // 请求成功以后的回调函数
- console.log(response);
- })
- .catch(function (error) { // 请求失败以后的回调函数
- console.log(error);
- });
- // b'firstName=Fred&lastName=Flintstone'
- 1.1 JSON
JSON 是 JavaScript Object Notation 的首字母缩写, 单词的意思是 JavaScript 对象表示法, 这里说的 JSON 指的是类似于 JavaScript 对象的一种数据格式.
JSON 的作用: 在不同的系统平台, 或不同编程语言之间传递数据.
1.1.1 JSON 数据的语法
JSON 数据对象类似于 JavaScript 中的对象, 但是它的键对应的值里面是没有函数方法的, 值可以是普通变量, 不支持 undefined, 值还可以是数组或者 JSON 对象.
- // JSON 数据的对象格式:
- {
- "name":"tom",
- "age":18
- }
- // JSON 数据的数组格式:
- ["tom",18,"programmer"]
复杂的 JSON 格式数据可以包含对象和数组的写法.
- {
- "name":"小明",
- "age":200,
- "fav":["code","eat","swim","read"],
- "son":{
- "name":"小小明",
- "age":100,
- "lve":["code","eat"],
- }
- }
- // 数组结构也可以作为 JSON 传输数据.
JSON 数据可以保存在. JSON 文件中, 一般里面就只有一个 JSON 对象.
总结:
1. JSON 文件的后缀是. JSON
2. JSON 文件一般保存一个单一的 JSON 数据
3. JSON 数据的属性不能是方法或者 undefined, 属性值只能: 数值, 字符串, JSON 和数组
4. JSON 数据只使用双引号, 每一个属性成员之间使用逗号隔开, 并且最后一个成员没有逗号.
- {
- "name":"小明",
- "age":200,
- "fav":["code","eat","swim","read"],
- "son":{
- "name":"小小明",
- "age":100
- }
- }
工具: postman 可以用于测试开发的数据接口.
1.1.2 JS 中提供的 JSON 数据转换方法
JavaScript 提供了一个 JSON 对象来操作 JSON 数据的数据转换.
方法 | 参数 | 返回值 | 描述 |
---|---|---|---|
stringify | json 对象 | 字符串 | json 对象转成字符串 |
parse | 字符串 | json 对象 | 字符串格式的 json 数据转成 json 对象 |
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body>
- <script>
- // JSON 语法
- let humen = {
- "username": "xiaohui",
- "password": "1234567",
- "age": 20
- };
- console.log(humen);
- console.log(typeof humen);
- // JSON 对象提供对 JSON 格式数据的转换功能
- // stringify(JSON 对象) # 用于把 JSON 转换成字符串
- let result = JSON.stringify(humen);
- console.log(result);
- console.log(typeof result);
- // parse(字符串类型的 JSON 数据) # 用于把字符串转成 JSON 对象
- let json_str = '{"password":"1123","age":20,"name":"xiaobai"}';
- console.log(json_str) console.log(typeof json_str) let json_obj = JSON.parse(json_str);
- console.log(json_obj);
- console.log(typeof json_obj) console.log(json_obj.age)
- </script>
- </body>
- </HTML>
1.2 Ajax
Ajax, 一般中文称之为:"阿贾克斯", 是英文 "Async Javascript And Xml" 的简写, 译作: 异步 JS 和 xml 数据传输数据.
Ajax 的作用: Ajax 可以让 JS 代替浏览器向后端程序发送 http 请求, 与后端通信, 在用户不知道的情况下操作数据和信息, 从而实现页面局部刷新数据 / 无刷新更新数据.
所以开发中 Ajax 是很常用的技术, 主要用于操作后端提供的数据接口, 从而实现网站的前后端分离.
Ajax 技术的原理是实例化 JS 的 XMLHttpRequest 对象, 使用此对象提供的内置方法就可以与后端进行数据通信.
1.2.1 数据接口
数据接口, 也叫 API 接口, 表示后端提供操作数据 / 功能的 url 地址给客户端使用.
客户端通过发起请求向服务端提供的 url 地址申请操作数据[操作一般: 增删查改]
同时在工作中, 大部分数据接口都不是手写, 而是通过函数库 / 框架来生成.
1.2.3 Ajax 的使用
Ajax 的使用必须与服务端程序配合使用, 但是目前我们先学习 Ajax 的使用, 所以暂时先不涉及到服务端 python 代码的编写. 因此, 我们可以使用别人写好的数据接口进行调用.
jQuery 将 Ajax 封装成了一个函数 $.Ajax(), 我们可以直接用这个函数来执行 Ajax 请求.
接口 | 地址 |
---|---|
天气接口 | http://wthrcdn.etouch.cn/weather_mini?city = 城市名称 |
音乐接口搜索 | http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query = 歌曲标题 |
音乐信息接口 | http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid = 音乐 ID |
编写代码获取接口提供的数据:
jQ 版本
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <script src="js/jquery-1.12.4.js">
- </script>
- <script>
- $(function() {
- $("#btn").on("click",
- function() {
- $.Ajax({
- // 后端程序的 url 地址
- url: 'http://wthrcdn.etouch.cn/weather_mini',
- // 也可以使用 method, 提交数据的方式, 默认是'GET', 常用的还有'POST'
- type: 'get',
- dataType: 'json',
- // 返回的数据格式, 常用的有是'json','html',"jsonp"
- data: { // 设置发送给服务器的数据, 如果是 get 请求, 也可以写在 url 地址的? 后面
- "city": '北京'
- }
- }).done(function(resp) { // 请求成功以后的操作
- console.log(resp);
- }).fail(function(error) { // 请求失败以后的操作
- console.log(error);
- });
- });
- })
- </script>
- </head>
- <body>
- <button id="btn">
- 点击获取数据
- </button>
- </body>
- </HTML>
vue 版本:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <script src="js/vue.js">
- </script>
- <script src="js/axios.js">
- </script>
- </head>
- <body>
- <div id="app">
- <input type="text" v-model="city">
- <button @click="get_weather">
- 点击获取天气
- </button>
- </div>
- <script>
- let vm = new Vue({
- el: "#app",
- data: {
- city: "",
- },
- methods: {
- get_weather() {
- // http://wthrcdn.etouch.cn/weather_mini?city = 城市名称
- axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city).then(response = >{
- console.log(response);
- }).
- catch(error = >{
- console.log(error.response)
- });
- }
- }
- })
- </script>
- </body>
- </HTML>
总结:
1. 发送 Ajax 请求, 要通过 $.Ajax(), 参数是对象, 里面有固定的参数名称.
- $.Ajax({
- "url":"数据接口 url 地址",
- "method":"http 请求方式, 前端只支持 get 和 post",
- "dataType":"设置服务器返回的数据格式, 常用的 json,html,jsonp, 默认值就是 json",
- // 要发送给后端的数据参数, post 时, 数据必须写在 data,get 可以写在 data, 也可以跟在地址栏? 号后面
- "data":{
- "数据名称":"数据值",
- }
- }).then(function(resp){ // Ajax 请求数据成功时会自动调用 then 方法的匿名函数
- console.log( resp ); // 服务端返回的数据
- }).fail(function(error){ // Ajax 请求数据失败时会自动调用 fail 方法的匿名函数
- console.log( error );
- });
2. Ajax 的使用往往配合事件 / 钩子操作进行调用.
jQuery 还提供了 $.get 和 $post 简写 $.Ajax 的操作.
- // 发送 get 请求
- // 参数 1: 数据接口的请求地址
- // 参数 2: 发送给接口地址的数据参数
- // 参数 3:Ajax 请求成功以后, 调用的匿名函数, 匿名函数的第一个参数还是服务端返回的数据
- // 参数 4: 设置服务端返回的数据格式, 告诉给 jQuery
- $.get("test.php", { "func": "getNameAndTime" },
- function(data){
- alert(data.name); // John
- console.log(data.time); // 2pm
- }, "json");
- // 发送 post 请求
- // 参数 1: 数据接口的请求地址
- // 参数 2: 发送给接口地址的数据参数
- // 参数 3:Ajax 请求成功以后, 调用的匿名函数, 匿名函数的第一个参数还是服务端返回的数据
- // 参数 4: 设置服务端返回的数据格式, 告诉给 jQuery
- $.post("test.php", { "func": "getNameAndTime" },
- function(data){
- alert(data.name); // John
- console.log(data.time); // 2pm
- }, "json");
1.2.4 同源策略
同源策略, 是浏览器为了保护用户信息安全的一种安全机制. 所谓的同源就是指代通信的两个地址 (例如服务端接口地址与浏览器客户端页面地址) 之间比较, 是否协议, 域名 (IP) 和端口相同. 不同源的客户端脚本 [JavaScript] 在没有明确授权的情况下, 没有权限读写对方信息.
Ajax 本质上还是 JavaScript, 是运行在浏览器中的脚本语言, 所以会被受到浏览器的同源策略所限制.
前端地址:
| 是否同源 | 原因 |
---|---|---|
http://www.oldboy.cn/user/login.html | 是 | 协议、域名、端口相同 |
http://www.oldboy.cn/about.html | 是 | 协议、域名、端口相同 |
https://www.oldboy.cn/user/login.html | 否 | 协议不同 ( https 和 http ) |
http:/www.oldboy.cn:5000/user/login.html | 否 | 端口 不同 ( 5000 和 80) |
http://bbs.oldboy.cn/user/login.html | 否 | 域名不同 ( bbs 和 www ) |
同源策略针对 Ajax 的拦截, 代码:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <script src="js/vue.js">
- </script>
- <script src="js/axios.js">
- </script>
- </head>
- <body>
- <div id="app">
- <button @click="get_music">
- 点击获取天气
- </button>
- </div>
- <script>
- let vm = new Vue({
- el: "#app",
- data: {},
- methods: {
- get_music() {
- axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query = 我的中国心").then(response = >{
- console.log(response);
- }).
- catch(error = >{
- console.log(error.response)
- });
- }
- }
- })
- </script>
- </body>
- </HTML>
上面代码运行错误如下:
Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=我的中国心' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
上面错误, 关键词: Access-Control-Allow-Origin
只要出现这个关键词, 就是访问受限. 出现同源策略的拦截问题.
1.2.5 Ajax 跨域 (跨源) 方案之 CORS
CORS 是一个 W3C 标准, 全称是 "跨域资源共享", 它允许浏览器向跨源的后端服务器发出 Ajax 请求, 从而克服了 Ajax 只能同源使用的限制.
实现 CORS 主要依靠后端服务器中响应数据中设置响应头信息返回的.
django 的视图
- def post(request):
- response = new Response()
- response .set_header("Access-Control-Allow-Origin","*")
- return response;
- // 在响应行信息里面设置以下内容:
Access-Control-Allow-Origin: Ajax 所在的域名地址
- Access-Control-Allow-Origin: www.oldboy.cn # 表示只允许 www.oldboy.cn 域名的客户端的 Ajax 跨域访问
- //* 表示任意源, 表示允许任意源下的客户端的 Ajax 都可以访问当前服务端信息
- Access-Control-Allow-Origin: *
总结:
0. 同源策略: 浏览器的一种保护用户数据的一种安全机制.
浏览器会限制脚本语法不能跨源访问其他源的数据地址.
同源: 判断两个通信的地址之间, 是否协议, 域名[IP], 端口一致.
Ajax: http://127.0.0.1/index.html
API 数据接口: http://localhost/index
这两个是同源么? 不是同源的. 是否同源的判断依据不会根据电脑来判断, 而是通过协议, 域名, 端口的字符串是否来判断.
1. Ajax 默认情况下会受到同源策略的影响, 一旦受到影响会报错误如下:
No 'Access-Control-Allow-Origin' header is present on the requested resource
2. 解决 Ajax 只能同源访问数据接口的方式:
1. 在服务端的响应行中设置:
Access-Control-Allow-Origin: 允许访问的域名地址
2. JSONP
3. 是否服务端代理
思路: 通过 python 来请求对应的服务器接口, 获取到数据以后,
来源: https://www.cnblogs.com/Sunzz/p/10791438.html