vue Note (1): https://blog.csdn.net/qq_43537987/article/details/93402865
Vue utilized vue-resource request initiated Ajax
- In addition vue-resource, you may be used
axiosto third packet to fulfill the request for data
Reference website:
https://www.runoob.com/vue2/vuejs-ajax.html
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
errorCallback (callback failed) parameters can be saved
get
getInfo() {
// 发起get请求
// 当发起get请求之后， 通过 .then 来设置成功的回调函数
//如果需要传递数据，可以使用 this.$http.get('get.php',{params : jsonData}) 格式， 第二个参数 jsonData 就是传到后端的数据。
this.$http.get('http://localhost/anli/select.php',{params:{a:1,b:2}}).then(function (result) {
// 通过 result.body 拿到服务器返回的成功的数据
console.log(result)
console.log(result.body)
})
},
post
postInfo() {
// 发起 post 请求 application/x-wwww-form-urlencoded
// 手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
// 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('/anli/demo_test_post.php', {name: "菜鸟教程",
url: "http://www.runoob.com"}, {emulateJSON: true}).then(result => {
console.log(result.body)
}, res => {
console.log(res.status)
})
},
jsonp
jsonpInfo() { // 发起JSONP 请求
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
}, res => {
console.log(res.status)
})
}
The principle of JSONP
-
Due to security restrictions browser, AJAX does not allow access to different protocols, different domain name and port number of different data interface, the browser that this visit unsafe;
-
Can be dynamically created script tag form, the src attribute of the script tag, data at the address of the interface, because there is no limit cross-domain script tag, this manner of data acquisition, called JSONP (Note: The implementation principle of JSONP, its , JSONP support only Get request);
-
The specific implementation process:
-
Define a client callback method, predefined operations on the data;
-
Then the name of the callback method by URL parameter passing form, submit the data interface to the server;
-
Organize server data interface to send data to the client, the client then took the passed callback method name, a string of splicing a call to this method, sent to the client to parse executed;
-
After the string returned by the server to get the client, as the Script script to parse executed, so it can get a JSONP data;
-
With that through Node.js, done manually request a JSONP example;
Service-Terminal:
const http = require('http'); // 导入解析 URL 地址的核心模块 const urlModule = require('url'); const server = http.createServer(); // 监听 服务器的 request 请求事件，处理每个请求 server.on('request', (req, res) => { const url = req.url; // 解析客户端请求的URL地址 var info = urlModule.parse(url, true); // 如果请求的 URL 地址是 /getjsonp ，则表示要获取JSONP类型的数据 if (info.pathname === '/getscript') { // 获取客户端指定的回调函数的名称 var cbName = info.query.callback; console.log(cbName) // 手动拼接要返回给客户端的数据对象 var data = { name: 'zs', age: 22, gender: '男', hobby: ['吃饭', '睡觉', '运动'] } // 拼接出一个方法的调用，在调用这个方法的时候，把要发送给客户端的数据，序列化为字符串，作为参数传递给这个调用的方法： var result = `${cbName}(${JSON.stringify(data)})`; // 将拼接好的方法的调用，返回给客户端去解析执行 res.setHeader('Content-Type','text/plain;charset=utf-8') res.end(result); } else { res.end('404'); } }); server.listen(3000, () => { console.log('server running at http://127.0.0.1:3000'); });Client:
<script> function show(data) { console.log(data); } </script> <script src='http://127.0.0.1:3000/getscript?callback=show'></script>
get, post, jsonp all the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue-2.4.0.js"></script>
<!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意 -->
<!-- this.$http.jsonp -->
<script src="./js/vue-resource-1.3.4.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求" @click="postInfo">
<input type="button" value="jsonp请求" @click="jsonpInfo">
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getInfo() { // 发起get请求
// 当发起get请求之后， 通过 .then 来设置成功的回调函数
//如果需要传递数据，可以使用 this.$http.get('get.php',{params : jsonData}) 格式，
// 第二个参数 jsonData 就是传到后端的数据。
this.$http.get('http://localhost/anli/select.php', {params: {a: 1, b: 2}}).then(function (result) {
// 通过 result.body 拿到服务器返回的成功的数据
console.log(result)
console.log(result.body)
})
},
postInfo() { // 发起 post 请求 application/x-wwww-form-urlencoded
// 手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
// 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('/anli/demo_test_post.php', {
name: "菜鸟教程",
url: "http://www.runoob.com"
}, {emulateJSON: true}).then(result => {
console.log(result.body)
}, res => {
console.log(res.status)
})
},
jsonpInfo() { // 发起JSONP 请求,案例的这个接口不好使。。。
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
}, res => {
console.log(res.status)
})
}
}
});
</script>
</body>
</html>
Global configuration (recommended script written in script at the top)
https://github.com/pagekit/vue-resource/blob/HEAD/docs/config.md
Global Configuration Interface with domain name
Unplaced before:
this.$http.jsonp('http://vue.studyit.io/api/jsonp')
this.$http.get('http://vue.studyit.io/api/get')
Configuration
Vue.http.options.root = 'http://vue.studyit.io/';
//如果我们通过全局配置了请求的接口的根域名，在每次单独发起http的时候，请求的url路径应该以相对路径开头，前面不能带 / ,否则不会启用根路径做拼接
this.$http.jsonp('api/jsonp')
this.$http.get('api/get')
Global emulateJSON rendering
Vue.http.options.emulateJSON = true;
this.$http.post('/anli/demo_test_post.php', {
name: "菜鸟教程",
url: "http://www.runoob.com"
}).then(result => {
console.log(result.body)
}, res => {
console.log(res.status)
})