brief introduction

vue and ajax

AJAX, namely "Asynchronous Javascript And XML" (Asynchronous Javascript And XML), refers to a web page development technology for creating interactive web applications.

Basic usage of ajax

Vue itself does not support sending AJAX requests. It needs to be implemented with jquery, vue-resource s, axios and other plug-ins.

1. Self-encapsulated ajax

1.1 Encapsulation of ajax

    function ajax(data){
        //Step 1: Create xhr objects
        var xhr = null;
        if(window.XMLHttpRequest)
            xhr = new XMLHttpRequest();
        else
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        //Step 2: Some configuration parameters before sending
        xhr.open(data.type,data.url,true);
        //Step 3: Execute the send action
        if(data.type == 'get'){
            xhr.send(null);
        }else if(data.type == 'post'){
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(data.data);
        }
        //Step 4: Specify callback functions
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 ){
                if(xhr.status == 200)//Successful implementation
                    data.success(xhr.responseText);
                else
                    data.failure();
            }
        }
    }

1.2 Call ajax

        ajax({
            url:'check.php',
            data:"username="+username.value+"&password="+password.value,
            type:'post',
            dataType:'json',
            success:function(data){
                info.innerHTML = data;
            },
            failure:function(){
                console.log("error!");
            }
        });

You can refer to another blog of mine.
A Preliminary View of ajax (1) - Encapsulating ajax

2. Use jquery

2.1 get request

$.get("check.php",{
        name:'admin',
        age:'123'
    },function(data){
    console.log(data);
});

2.2 post request

$.post("check2.php",{
    name:'admin',
    age:'123'
},function(data){
   console.log(data);
});

3. Use vue-resource

Vue 2.0 no longer updates and maintains vue-resource

3.1 Basic Usage

 this.$http.get(url, [options])
 this.$http.head(url, [options])
 this.$http.delete(url, [options])
 this.$http.jsonp(url, [options])
 this.$http.post(url, [body], [options])
 this.$http.put(url, [body], [options])
 this.$http.patch(url, [body], [options])

3.2get request

this.$http.get('check.php',{
    params:{
        name:'admin',
        age:'123'
    }
})
.then((res) => {
    console.log(res);
}, (error) => {
  console.log(error);
});

3.3 post request

this.$http.post('check2.php',{
    name:'admin',
    age:'123'
},{emulateJSON: true})
.then((res) => {
    console.log(res);
}, (error) => {
  console.log(error);
});

3.4 emulateJSON: The Role of True

    If the Web server cannot process requests coded as application/json, you can enable the emulate JSON option.
    When this option is enabled, the request will use application/x-www-form-urlencoded as the MIME type, just like a normal HTML form.

4. Use axios

axios is officially recommended by Vue 2.0

4.1 Basic Usage

axios([options])

4.11 axios.get(url[,options]);

Reference methods:
        1. Reference via url
        2. Passing parameters through params option

4.12 axios.post(url,data,[options]);

When axios sends data by default, the data format is Request Payload, which is not our usual Form Data format.
So parameters must be passed in the form of key-value pairs, not in the form of json.

Reference methods:
        1. Splice them into key-value pairs.
        2. Using transformRequest, the request data is converted before the request is sent.
        3. If you use modular development, you can use qs module for conversion

Axios itself does not support sending cross-domain requests, does not provide the corresponding API, and the author does not plan to add support for sending cross-domain requests in axios, so only third-party libraries can be used.

4.2 get request

axios.get('check.php',{
    params:{
        name:'admin',
        age:'123'
    }
})
.then(res=>{
    console.log(res);
}).catch(error=>{
    console.log(error);
});

4.3 post request

//One way
axios.post('check2.php','name=admin&age=13')
.then(res=>{
    console.log(res);
}).catch(error=>{
    console.log(error);
});
//Mode two
axios.post('check2.php',{
    name:'admin',
    age:'123'
},{
    transformRequest:[
        function(data){
            let params='';
            for(let index in data){
                params+=index+'='+data[index]+'&';
            }
            return params;
        }
    ]
})
.then(res=>{
    console.log(res);
}).catch(error=>{
    console.log(error);
});