<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Ajax VUE.JS </title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="appLSG">
<h1> Lista de cineastas </h1>
<div class="row">
<div class="span12">
<a href="javascript:void(0)" v-on:click="limpiarBusqueda()"> Limpiar búsqueda </a>
</div>
</div>
<hr />
<ul>
<li v-for="item in cineastas">
<h2> {{ item.nombre }} </h2>
<div class="row">
<div class="span2" v-for="item2 in item.peliculas">
<a href="javascript:void(0)" v-on:click="filtrarPorpelicula(item2)"> {{ item2 }} </a>
</div>
</div>
<hr />
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
app.js:
var app = new Vue({
el: '#appLSG',
data: {
cineastas: []
},
methods: {
filtrarPorpelicula: function(pelicula){
this.$http.post('_ajax_response.php', {
pelicula: pelicula
}).then(function(response){
this.cineastas = response.body;
}, function(){
alert('Error!')
});
},
limpiarBusqueda: function(){
this.$http.get('_ajax_response.php').then(function(response){
this.cineastas = response.body;
}, function(){
alert('Error!');
});
}
},
created: function(){
this.$http.get('_ajax_response.php').then(function(response){
this.cineastas = response.body;
}, function(){
alert('Error!');
});
}
});
_ajax_response.php:
$request = json_decode(file_get_contents('php://input'));
$response = array();
$cineastas = array(
array('nombre' => 'John Ford', 'peliculas' => array("La diligencia", "Las uvas de la ira", "Fort Apache", "El hombre tranquilo", "El hombre que mato a Liberty Valance")),
array('nombre' => 'John Wayne', 'peliculas' => array("La diligencia", "Fort Apache", "El hombre tranquilo", "El hombre que mato a Liberty Valance")),
array('nombre' => 'Henry Fonda', 'peliculas' => array("Las uvas de la ira", "Fort Apache")),
array('nombre' => 'James Stewart', 'peliculas' => array("El hombre que mato a Liberty Valance"))
);
if(is_null($request)){
$response = $cineastas;
}else{
foreach($cineastas as $item){
if(in_array($request->pelicula, $item['peliculas'])){
$response[] = $item;
}
}
}
echo json_encode($response);
No hay comentarios:
Publicar un comentario