Vue.js Ajax(vue-resource)

Para implementar la carga asíncrona, Vue necesita usar la librería vue-resource.

La versión Vue.js 2.0 recomienda usaraxiospara completar las peticiones ajax.

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

Petición GET

El siguiente es un ejemplo simple de petición GET, donde la URL de la petición es un simple archivo de texto:

Ejemplo

window.onload = function(){ var vm = new Vue({ el:'#box', data:{ msg:'Hello World!', }, methods:{ get:function(){ //Enviar petición get this.$http.get('/try/ajax/ajax_info.txt').then(function(res){ document.write(res.body); },function(){ console.log('Manejo de fallos de la petición'); }); } } }); }

Pruébalo »

Si necesitas pasar datos, puedes usarthis.$http.get('get.php',{params : jsonData})formato, el segundo parámetrojsonDatason los datos que se envían al backend.

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

Petición POST

POST envía datos al backend, necesita un tercer parámetro {emulateJSON:true}。

Función de emulateJSON: si el servidor web no puede manejar peticiones codificadas como application/json, puedes habilitar la opción emulateJSON.

Ejemplo

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

Pruébalo »

El código de demo_test_post.php es el siguiente:

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

Sintaxis y API

Puedes usar el objeto global Vue.http o, dentro de una instancia de Vue, usar this.$http para realizar peticiones HTTP.

// 基于全局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 proporciona 7 APIs de petición (estilo REST):
get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

Excepto jsonp, los nombres de las otras 6 APIs son métodos HTTP estándar.

Descripción de los parámetros de options:

Parámetro Tipo Descripción
url string URL de destino de la petición
body Object, FormData, string Datos enviados como cuerpo de la petición
headers Object Objeto de cabecera enviado como cabecera de la petición
params Object Objeto de parámetros como parámetros de URL
method string Método HTTP (por ejemplo, GET, POST, ...)
timeout number Tiempo de espera de la petición (en milisegundos) (0indica que nunca caduca)
before function(request) Función de devolución de llamada para modificar la petición antes de enviarla
progress function(event) Función de devolución de llamada ProgressEvent para manejar el progreso de la subida
credentials boolean Si se necesitan mostrar credenciales para peticiones entre sitios
emulateHTTP boolean Si es necesario configurandoX-HTTP-Method-Overridela cabecera y enviar peticiones PUT, PATCH y DELETE de forma tradicional POST.
emulateJSON boolean Establecer el tipo de cuerpo de la petición comoapplication/x-www-form-urlencoded

Procesa el objeto de respuesta obtenido de una petición mediante las siguientes propiedades y métodos:

Propiedad Tipo Descripción
url string Origen de la URL de la respuesta
body Object, Blob, string Datos del cuerpo de la respuesta
headers Header Objeto de cabecera de la petición
ok boolean Este valor es true cuando el código de respuesta HTTP está entre 200 y 299
status number Código de respuesta HTTP
statusText string Estado de respuesta HTTP
Método Tipo Descripción
text() valor convenido Devuelve el cuerpo de la respuesta como cadena
json() valor convenido Devuelve el cuerpo de la respuesta como objeto json formateado
blob() valor convenido Devuelve el cuerpo de la respuesta como objeto Blob binario
Otras extensiones