Vue.js Ajax (vue-resource)

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

For Vue.js 2.0, it is recommended to use axios to handle ajax requests.

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

GET Request

Below is a simple example of a GET request, where the request address is a simple txt file:

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

If you need to pass data, you can use the format this.$http.get('get.php', {params: jsonData}), where jsonData is 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

To send data to the backend with POST, you need the third parameter {emulateJSON: true}.

The purpose 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: "tutorialpro.org", url: "http://www.tutorialpro.org"}, {emulateJSON: true}).then(function(res){
                    document.write(res.body);    
                }, function(res){
                    console.log(res.status);
                });
            }
        }
    });
}

The demo_test_post.php code is as follows:

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo 'Website Name: ' . $name;
echo "\n";
echo 'URL Address: ' . $city;
?>

Syntax & API

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

// Using http based on the global Vue object

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// Using $http within a Vue instance this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

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 six API names are standard HTTP methods.

Options parameter description:

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