Vue.js Ajax(vue-resource)

Vue To implement asynchronous loading you need to use the vue-resource library.

<script src< /span>="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js "></script>

Get request

The following is a simple Get request instance, the request address is a simple txt text:


window. Onload = function( ){ var vm = new Vue({ el:'#box', data:{ msg:'Hello World!', }, methods:{ get:function(){ //Send get request this.$http.get('/try/ajax/ajax_info.txt').then(function(res){ document.write(res.body); },function(){ console.log('Request failure processing'); }); } } }); }

If you need to pass data, you can use this.$http.get('get.php',jsonData) Format, second parameter jsonData It is the data that is passed to the back end.


Post request

post Sending data to the backend requires a third parameter {emulateJSON:true}.

The role of emulateJSON: If the web server cannot handle requests encoded as application/json, you can enable the emulateJSON option.


window. Onload = function( ){ var vm = new Vue({ el:'#box', data:{ msg:'Hello World!', }, methods:{ post:function(){ //Send a post request this.$http .post('/try/ajax/demo_test_post.php',{name:"welookupsTutorial"< /span>,url:"http://www.welookups.com"},{emulateJSON:true}).then(function(res){ document.write(res.body); },function(res){ console.log(res.status); }); } } }); }

demo_test_post.php The code is as follows:

$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo 'Website name: ' . $name;
echo "\n";
echo 'URL address: ' .$city;

grammar & API

You can use the global object method Vue.http or use this.$http inside a Vue instance to initiate an HTTP request.

// Use http based on global Vue object
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// Use $http in a Vue instance
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
Vue-resource provides 7 request APIs (REST style):
get(url, [options< /span>])
Head(url, [options])
delete(url, [options])
Jsonp(url, [options])
Post(url, [body], [options])
Put(url, [body], [options])
Patch(url, [body], [options])

In addition to jsonp, the other six API names are standard HTTP methods.

options Parameter Description:

parameters Type Description
url string Requested target URL
body Object, FormData, string Data sent as a request body
headers Object as the header object sent by the request header
params Object Parameter object as a URL parameter
method string HTTP method (eg GET, POST, ...)
timeout number Request timeout (unit: milliseconds) (0 means never timeout)
before function(request) Modify the request's callback function before the request is sent
progress function(event) Callback function for handling upload progress ProgressEvent
credentials boolean Do you need to present credentials for cross-site requests
emulateHTTP boolean Whether to set the X-HTTP-Method-Override header and send PUT, PATCH and DELETE requests in the traditional POST mode.
emulateJSON boolean Set the request body type to application/x-www-form-urlencoded

welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.