Vue.js Ajax(vue-resource)

Vue needs to use the vue-resource library to implement asynchronous loading.

Vue.js 2.0 recommends usingaxiosto make Ajax requests.

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

GET request

The following is a simple GET request example. The request URL is a simple txt text:

Example

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 handling'); }); } } }); }

Try it »

If you need to pass data, you can usethis.$http.get('get.php',{params : jsonData})format, the second parameterjsonDatais the data sent to the backend.

this.$http.get('get.php',{params : {a:1,b:2}}).then(function(res){
    document.write(res.body);    
},function(res){
    console.log(res.status);
});

POST request

POST sends data to the backend; you need the 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.

Example

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

Try it »

The code of demo_test_post.php is as follows:

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$city;
?>

Syntax & API

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

// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http
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])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

Except for jsonp, the other 6 API names are standard HTTP methods.

options parameter description:

Parameter Type Description
url string The target URL of the request
body Object, FormData, string Data sent as the request body
headers Object Header object sent as the request header
params Object Parameter object used as URL parameters
method string HTTP method (e.g., GET, POST, ...)
timeout number Request timeout (unit: milliseconds) (0means never timeout)
before function(request) Callback function to modify the request before it is sent
progress function(event) Callback function for handling upload progress, ProgressEvent
credentials boolean Whether credentials are required for cross-site requests
emulateHTTP boolean Whether to setX-HTTP-Method-Overrideheaders and send PUT, PATCH, and DELETE requests in traditional POST mode.
emulateJSON boolean Set the type of the request body toapplication/x-www-form-urlencoded

Handle the response object obtained from a request through the following properties and methods:

Property Type Description
url string The response's URL source
body Object, Blob, string Response body data
headers Header Request header object
ok boolean This value is true when the HTTP response code is between 200 and 299
status number HTTP response code
statusText string HTTP response status
Method Type Description
text() agreed value Returns the response body as a string
json() agreed value Returns the response body as a formatted JSON object
blob() agreed value Returns the response body as a binary Blob object
Other extensions