Mostrando entradas con la etiqueta json. Mostrar todas las entradas
Mostrando entradas con la etiqueta json. Mostrar todas las entradas

martes, 17 de noviembre de 2015

7 - Tutorial de Laravel 5 - Validar con Ajax JSON y mensajes flash



Bienvenid@s, en este capítulo del Tutorial de Laravel 5 continuamos viendo aspectos de validación de formularios, concretamente nos centraremos en realizar una petición vía ajax al servidor para validar el formulario con el cual estuvimos trabajando en el capítulo anterior, de existir algún error obtendremos una respuesta en formato json con los posibles mensajes de error, esto lo controlaremos desde el método response(array $errors) de la clase MiFormulario, igualmente recibiremos una respuesta json desde la acción validarMiFormulario de ser válido el formulario para mostrar un mensaje de enhorabuena en la vista.

Manejaremos dos posibilidades la utilización de la tecnología ajax para el caso de que el usuario tenga activado javascript, que es lo normal y la extraña posibilidad de que lo tenga desactivado, en este caso controlaremos la petición directa al servidor.

También veremos otro punto importante, el cual es la redirección enviando mensajes flash.

El código de cada uno de los ejercicios los podéis ver a continuación:

Vista miformulario.blade.php:


@extends('layouts.home')
@section('title', 'Mi formulario')
@section('description', 'Validar Mi formulario')
@section('keywords', 'validar, mi, formulario')

@section('content')

<h1>Mi Formulario</h1>

<div class="text-success" id='result'>
    @if(Session::has('message'))
        {{Session::get('message')}}
    @endif
</div>

<form method="post" action="{{url('home/validarmiformulario')}}" id='form'>
    <div class="form-group">
        <label for="nombre">Nombre: </label>
        <input type="text" name="nombre" class="form-control" value="{{Input::old('nombre')}}" />
        <div class="text-danger" id='error_nombre'>{{$errors->formulario->first('nombre')}}</div>
    </div>
    
    <div class="form-group">
        <label for="email">Email: </label>
        <input type="text" name="email" class="form-control" value="{{Input::old('email')}}" />
        <div class="text-danger" id='error_email'>{{$errors->formulario->first('email')}}</div>
    </div>
    {{csrf_field()}}
    <button type="submit" class="btn btn-primary">Enviar</button>
</form>

<script>
 $(function(){
     $("#form").submit(function(e){
         
         var fields = $(this).serialize();
         $.post("{{url('home/validarmiformulario')}}", fields, function(data){
             
             if(data.valid !== undefined){
                 $("#result").html("Enhorabuena formulario enviado correctamente");
                 $("#form")[0].reset();
                 $("#error_nombre").html('');
                 $("#error_email").html('');
             }
             else{
                 $("#error_nombre").html('');
                 $("#error_email").html('');
                 if (data.nombre !== undefined){
                    $("#error_nombre").html(data.nombre); 
                 }
                 if (data.email !== undefined){
                     $("#error_email").html(data.email);
                 }
             }
             
         });
         
         return false;
     });
 });
</script>

@stop


Clase MiFormulario.php:

<?php

namespace App\Http\Requests;
use App\Http\Requests\Request;

class MiFormulario extends Request{
    
    protected $redirect = "home/miformulario";
    
    public function rules(){
        return [
            'nombre' => 'required|min:3|max:12|regex:/^[a-z]+$/i',
            'email' => 'required|email',
        ];
    }
    
    public function messages(){
        return [
            'nombre.required' => 'El campo nombre es requerido',
            'nombre.min' => 'El mínimo permitido son 3 caracteres',
            'nombre.max' => 'El máximo permitido son 12 caracteres',
            'nombre.regex' => 'Sólo se aceptan letras',
            'email.required' => 'El campo email es requerido',
            'email.email' => 'El formato de email es incorrecto',
        ];
    }
    
    public function response(array $errors){
        if ($this->ajax()){
            return response()->json($errors, 200);
        }
        else
        {
        return redirect($this->redirect)
                ->withErrors($errors, 'formulario')
                ->withInput();
        }
    }
    
    public function authorize(){
        return true;
    }
    
}


Acción validarMiFormulario del controlador HomeController:

    public function validarMiFormulario(MiFormulario $formulario){
        $validator = Validator::make(
                $formulario->all(), 
                $formulario->rules(),
                $formulario->messages()
                );
        if ($validator->valid()){
            
            if ($formulario->ajax()){
                return response()->json(["valid" => true], 200);
            }
            else{
            return redirect('home/miformulario')
                    ->with('message', 'Enhorabuena formulario enviado correctamente');
            }
        }
    }





lunes, 10 de agosto de 2015

jQuery Ajax - Método getJSON







Autor: codigofacilito

Título: Tutorial jQuery 34: Método getJSON

Descripción:

Curso de Ruby ► http://bit.ly/RubyFacilito

-----

MÁS CURSOS de CódigoFacilito:

Curso de Python:
►http://bit.ly/PythonFacilito

Curso para crear una página web en HTML5:
►http://bit.ly/PaginaWebHTML5

Curso de HTML5:
►http://bit.ly/HTML5Facilito

Curso de CSS:
►http://bit.ly/CSSFacilito

Curso de PHP:
►http://bit.ly/PHPFacilito

Curso de JavaScript y jQuery:
►http://bit.ly/jQueryFacilito

Curso de Java:
►http://bit.ly/JavaFacilito

Curso de C++:
►http://bit.ly/CFacilito

Curso de Xcode:
►http://bit.ly/XcodeFacilito

-----

Sitio web:
►http://codigofacilito.com/

Síguenos en Twitter:
►http://twitter.com/codigofacilito

"Like" en Facebook:
►http://facebook.com/codigofacilito

Suscríbete en YouTube:
►http://bit.ly/qHEewR

Únete al Newsletter:
►http://bit.ly/CorreoFacilito

-----



-----

Contacta al Tutor del Curso:
Canal:
http://www.youtube.com/DxvTuts
Twitter:
@DxvTweet
FanPage:
http://www.facebook.com/DxVBook

Otras sugerencias ...

Tutorial jQuery 30: Peticiones con el método 'ajax'
¿Cuánto dinero gana un programador web?
jQuery Mobile - Parte 2 - Descargando archivos e incluyendo el Framework
Crea un Tema de WordPress: Parte 12 - Archivo page.php
JSON AJAX PHP MYSQL EXAMPLE
Curso jQuery, Usando web services con JSON
jQuery Ajax Twitter API Tutorial
Json Tutorial 1: Introducción
[Basic] Loading data with Jquery AJAX JSON
JSON Tutorial for beginners w/ jQuery
INTRO to jQUERY's .getJSON() FUNCTION - Super Simple Javascript/jQuery Tutorials
Reading JSON with jQuery
Tutorial jQuery 25 - AJAX método $.getJSON
Trucos y Atajos de Teclado para Sublime Text
Using AJAX with jQuery
Using DBPedia
json.parse - Parsing JSON with JQuery
Working with JSON and PHP
Fetch JSON Data Using jQuery AJAX Method: getJSON

miércoles, 3 de septiembre de 2014

Tutorial Javascript parte 30 - AJAX JSON




En esta parte del tutorial seguimos viendo la tecnología ajax y en esta ocasión veremos como realizar una petición a un archivo json y como acceder a sus datos.

JSON, acrónimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.

Los dos archivos del capítulo los puedes ver a continuación ...

json.php

<!DOCTYPE HTML>
<html>
<head>
<script>

window.onload = function()
{
 if (window.XMLHttpRequest)
 {
  var ajax = new XMLHttpRequest();
 }
 else
 {
 var ajax = new ActiveXObject("Microsoft.XMLHTTP");
 }
 
 ajax.onreadystatechange = function()
   {
     //Si la petición es correcta
  if (ajax.readyState == 4 && ajax.status == 200)
   {
    json = JSON.parse(ajax.responseText);
    
    for(x=0; x<json.alumnos.length;x++)
    {
    document.getElementById("contenedor").innerHTML += "Alumno: " + json.alumnos[x]["nombre"] + " Nota: " + json.alumnos[x]["nota"] + "<br>";
    }
   }
   }
   ajax.open("GET", "demo.json", true);
   ajax.send();
}
</script>
</head>
<body>
<div id="contenedor"></div>
</body>
</html>


demo.json

{"alumnos":
 [
  {"nombre":"Manuel", "nota":8},
  {"nombre":"Pepe", "nota":7.5},
  {"nombre":"Raul", "nota":9}
 ]
}


miércoles, 28 de mayo de 2014

VídeoTutorial jQuery 25 - AJAX método $.getJSON


En esta parte del curso veremos como obtener información de un archivo en formato .json mediante el método AJAX $.getJSON(), el formato json está basado en el lenguaje Javascript y es útil para el intercambio de datos, los datos json son estructurados a modo de arrays indexados a través de claves.




domingo, 17 de noviembre de 2013

Como hacer una petición Ajax a json con Jquery




Bienvenid@s, hoy veremos como realizar una petición ajax a datos en formato json, este tipo de formatos es una notación de objetos Javascript y su uso está muy extendido como alternativa al formato XML.

Mediante el formato json podemos crear objetos entrelazados que van formándose en el interior de un array asociativo, que posteriormente podemos extraer mediante Ajax, por ejemplo, mediante el método getJSON de Jquery.

Este tipo de peticiones pueden hacerse a un archivo con extensión .json, este tipo de archivos muestra su contenido en texto plano, al igual que otro cualquier archivo de texto, el cliente puede acceder a dicha información, a no ser que estes trabajando con node.js, por lo tanto, la información que contenga un archivo .json nunca debe de comprometer la seguridad de la web.

También existe la posibilidad de hacer una petición a json a través de php, es decir, se construye el array con la información dentro de código PHP y se codifica a formato json a través de la función json_encode.

En el siguiente ejemplo vamos a ver como crear un array de objetos en formato json, tanto en un archivo .json como en .php, este array nos permitirá crear una tabla, incluyendo su id, cellpadding, border, el nombre de las columnas y cada una de sus filas.

Los archivos del ejercició son ...

index.html : que será el encargado de realizar la petición ajax a json

ajax.json : que contendrá la información con los datos para crear una tabla.

ajax.php : es el equivalente de ajax.json en formato .php

index.html

<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<title>Como hacer una petición Ajax a json con Jquery</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
//También puedes probar a incluir una petición al equivalente ajax.php
$.getJSON( "ajax.json", function(data){
//Creamos la tabla
$("#content").html("<table id='"+data.table.id+"' cellpadding='"+data.table.cellpadding+"' border='"+data.table.border+"'></table>");

//Incluimos la fila con el nombre de las columnas
$("#"+data.table.id).append("<tr><th>"+data.table.colums[0]+"</th><th>"+data.table.colums[1]+"</th><th>"+data.table.colums[2]+"</th></tr>");

//Incluimos los datos para cada una de las filas
$.each(data.table.tr, function(index){
$("#"+data.table.id).append("<tr><td>"+data.table.tr[index][0]+"</td><td>"+data.table.tr[index][1]+"</td><td>"+data.table.tr[index][2]+"</td></tr>");
});
});
});
</script>
</head>
<body>
</body>
<div id="content"></div>
</html>


ajax.json

{"table":{
"id" : "tabla",
"cellpadding" : "10",
"border":"1",
"colums" : ["Nombre","Ciudad","País"],

"tr":[
["Pepe","Madrid","España"],
["Rodolfo","Barcelona","España"],
["Radamel","Bogotá","Colombia"],
["Fernando","Buenos Aires","Argentina"]]
}
}


ajax.php

$json = array
(
'table' => array(
'id' => 'tabla',
'cellpadding' => '10',
'border' => '1',
'colums' => array('Nombre', 'Ciudad', 'País'),
'tr' => array
(
0 => array('Pepe', 'Madrid', 'España'),
1 => array('Rodolfo', 'Barcelona', 'España'),
2 => array('Radamel', 'Bogotá', 'Colombia'),
3 => array('Fernando', 'Buenos Aires', 'Argentina')
)
)
);
echo json_encode($json);