Shulou(Shulou.com)06/03 Report--

This article mainly shows you "vuejs how to use ajax", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vuejs how to use ajax" this article.

Methods: 1. Install and introduce axios, using "axios ([option])" and "axios.get (url [,...])" And other methods to send the request. 2. Install and introduce vue-resource, using "this.$http.jsonp (url, [...])" Send a request.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue itself does not support sending AJAX requests, which need to be implemented using plug-ins such as vue-resource, axios and so on.

Axios is a Promise-based HTTP request client used to send requests, which is also officially recommended by vue2.0, while no longer updating and maintaining vue-resource.

Vuejs's method of using ajax

1. Install axios and introduce

1) npm method: npm install axios-S

2) bower method: bower install axios

3) the way of cdn:

2. Basic usage

1) axios ([options])

Axios send ajax request basic usage send ajax request new Vue ({el: "# app", methods: {send () {axios ({method:'get') Url:'user.json'}) .then (function (res) {console.log (res.data.name) );})

2) axios.get (url [, options])

Parameter transfer method:

(1) pass the parameter axios ('url?key=value&key1=val2') .then () through url

(2) pass the parameter axios ('url', {params: {key:value}}) .then () through the params option

3) axios.post (url,data, [options])

When axios sends data by default, the data format is Request Payload, not the commonly used Form Data format.

So parameters must be passed in the form of key-value pairs, not in the form of json.

Parameter transfer method:

(1) self-stitching into key-value pairs

Axios.post ('url','key=value&key1=value1') .then ()

(2) use transformRequest to convert the request data before the request is sent

Axios.post ('url',data, {transformRequest: [function (data) {let params =''; for (let index in data) {params + = index+'='+data [index] +'&' } return params;}]}) .then (function (res) {console.log (res.data)})

(3) if modular development is used, qs module can be used for conversion.

Axios itself does not support sending cross-domain requests, does not provide a corresponding API, and the author has no plans to add support for sending cross-domain requests in axios.

So you can only use the third-party library.

Cross-domain requests (send cross-domain requests using vue-resource)

1. Send cross-domain request steps using vue-resource

Install vue-resource and introduce: npm install vue-resource-S

Basic usage:

Send a request using this.$http.jsonp (url, [ops])

2. Basic usage demonstration (360 search)

1) Open 360 search, and then enter the character'a'. Some search options will be automatically prompted, as shown in the figure.

2) copy the link

Https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a

3) Code demonstration

Use vue-resource to send a cross-domain request send var vm = new Vue ({el: "# app", methods: {sendJsonp:function () {this.$http.jsonp ('https://sug.so.360.cn/suggest',) {params: {word:'a'}}) .then (function (res) {console.log (res.data) );})

4) result

3. Basic example demonstration (Baidu search)

1) requirements are the same as those of 360 search

2) copy the link

= 1526436420943 "> https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1467_21117_20927&req=2&csor=1&cb=jQuery1102060305102784707_1526436420940&=1526436420943

3) Code demonstration (note)-first attempt

If you write according to the above code, the result will be wrong.

Use vue-resource to send a cross-domain request send var vm = new Vue ({el: "# app", methods: {sendJsonp:function () {this.$http.jsonp ('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',) {params: {wd:'a'}}) .then (function (res) {console.log (res.data) );})

The result will be an error.

Then why is that?

Previously, the parameter name of jsonp callback is callback, while the parameter used by Baidu is cb, so it will report an error.

The modified code is as follows

Use vue-resource to send a cross-domain request send var vm = new Vue ({el: "# app", methods: {sendJsonp:function () {this.$http.jsonp ('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',) {params: {wd:'a'}, jsonp:'cb'}) .then (function (res) {console.log (res.data)) );})

4) result

4. Baidu search case demonstration

Baidu search list. Current {background-color:#CCCCCC } _ window.onload=function () {new Vue ({el: "# app", data: {keyword:', myData: [], now:-1}) Methods: {getData (e) {/ / if you press the arrow keys up and down Then the request if (e.keyCode = = 38 | | e.keyCode = = 40) return is not sent. This.$http.jsonp ('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {params: {wd: this.keyword}) Jsonp: 'cb'}) .then (function (res) {console.log (res.data.s)) This.myData = res.data.s;});}, changeDown () {this.now++; this.keyword = this.myData [this.now] If (this.now = = this.myData.length) {this.now =-1;}}, changeUp () {this.now--; this.keyword = this.myData [this.now] If (this.now = =-2) {this.now = this.myData.length-1;}) } {{val}} the above is all the content of the article "how vuejs uses ajax". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.