Post via Ajax

Curso de API REST con PHP

Comprender los objetivos y pre-requisitos del curso

Qué aprenderás sobre API REST

Qué es una API y para qué sirve

Conocer los conceptos principales de REST

Qué es el protocolo HTTP y cómo funciona

Qué es una API REST (API RESTful)

Aprender a consumir servicios REST

Cómo realizar una petición REST e interpretar sus resultados

Aprender a producir servicios REST

Exponer datos a través de HTTP GET

Exponer un recurso en particular a través de HTTP GET

Incorporar datos a través de HTTP POST

Modificar datos a través de HTTP PUT

Eliminar datos a través de HTTP DELETE

Conocer diferentes modos de restringir el acceso a las API Rest

Autenticación vía HTTP

Autenticación vía HMAC

Autenticación vía Access Tokens

Aprender a tratar errores en la comunicación vía REST

Manejo de errores de un servicio REST

Aprender a utilizar una API Rest para la comunicación FrontEnd/BackEnd

Introducción a Ajax

Get via Ajax

Post via Ajax

Deploy

Conocer buenas prácticas del diseño de APIs REST

7 Buenas prácticas del diseño de APIs RESTful

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Iniciar sesión

Recursos

Aportes 18

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Luis Rangel Castro

hace 4 años

router.php

<?php

$matches=[];

// Excepcion para las  url principal sea index.html
if (in_array( $_SERVER["REQUEST_URI"], [ '/index.html', '/', '' ] )) {
    echo file_get_contents( '/Users/luisrangel/dev/cursos/php/APIRest/index.html' );
    die;
}

if(preg_match('/\/([^\/]+)\/([^\/]+)/',$_SERVER["REQUEST_URI"],$matches))
{
    $_GET['resource_type']=$matches[1];    
    $_GET['resource_id']=$matches[2];
    error_log(print_r($matches,1));
    require 'server.php';
}elseif(preg_match('/\/([^\/]+)\/?/',$_SERVER["REQUEST_URI"],$matches))
{
    $_GET['resource_type']=$matches[1];        
    error_log(print_r($matches,1));
    require 'server.php';
}else
{
    error_log('No matches');
    http_response_code(404);
}

Luis Rangel Castro

hace 4 años

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<table id="booksTable" class="table">
    <thead>
        <tr>
            <th>Titulo</th>
            <th>Id_Autor</th>
            <th>Id_Genero</th>
        </tr>
    </thead>
</table>
<tbody>
</tbody>
<input type="button" value="Cargar libros" id="loadBooks" />
<div style="display: none;" id="messages">
    <p></p>
</div>
<div style="display: none;" id="bookForm">
    <hr />
    <table>
        <tr>
            <td>Titulo:</td>
            <td><input type="text" name="bookTitle" id="bookTitle"></td>
        </tr>
        <tr>
            <td>ID Autor:</td>
            <td><input type="number" name="bookAuthorId" id="bookAuthorId" min="1"></td>
        </tr>
        <tr>
            <td>ID Genero:</td>
            <td><input type="number" name="bookGenreId" id="bookGenreId" min="1"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" value="Guardar" id="bookSave" /></td>
        </tr>
    </table>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
<table id="booksTable" class="table">
    <thead>
        <tr>
            <th>Titulo</th>
            <th>Id_Autor</th>
            <th>Id_Genero</th>
        </tr>
    </thead>
</table>
<tbody>
</tbody>
<input type="button" value="Cargar libros" id="loadBooks" />
<div style="display: none;" id="messages">
    <p></p>
</div>
<div style="display: none;" id="bookForm">
    <hr />
    <table>
        <tr>
            <td>Titulo:</td>
            <td><input type="text" name="bookTitle" id="bookTitle"></td>
        </tr>
        <tr>
            <td>ID Autor:</td>
            <td><input type="number" name="bookAuthorId" id="bookAuthorId" min="1"></td>
        </tr>
        <tr>
            <td>ID Genero:</td>
            <td><input type="number" name="bookGenreId" id="bookGenreId" min="1"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" value="Guardar" id="bookSave" /></td>
        </tr>
    </table>
</div>
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('#loadBooks').click(function () {
        $('#messages').first('p').text('Cargando libros...');
        $('#messages').show();
        $.ajax({
            'url': 'http://localhost:8000/books',
            'success': function (data) {
                $('#messages').hide();
                $('#booksTable > tbody').empty();
                for (b in data) {
                    addBook(data[b]);
                }
                $('#bookForm').show();
            }
        });
    });

    function addBook(book) {
        $('#booksTable tr:last').after('<tr><td>' + book.titulo + '</td><td>' + book.id_autor + '</td><td>' + book.id_genero + '</td></tr>');
    }

    $('#bookSave').click(function() {
        var newBook = {
            'titulo' : $('#bookTitle').val(),
            'id_autor' : $('#bookAuthorId').val(),
            'id_genero' : $('#bookGenreId').val()
        };
        $('#messages').first('p').text('Guardando libro...');
        $('#messages').show();

        $.ajax({
            'url' : 'http://localhost:8000/books',
            'method': 'POST',
            'data': JSON.stringify(newBook),
            'success': function(data){
                $('#messages').hide();
                addBook(newBook);
            }
        });
    });
</script>

</html>

Martín S. Campos

hace 3 años

Recordando los viejos tiempos con JQuery y Ajax.
Ya en la actualidad utilizo Vue.js y Axios

Luis Rangel Castro

hace 4 años

server.php

<?php

/*
//-- Autenticacion via HTTP
//------------------------------->
$user = array_key_exists('PHP_AUTH_USER',$_SERVER) ? $_SERVER['PHP_AUTH_USER'] : '';
$pwd = array_key_exists('PHP_AUTH_PW',$_SERVER) ? $_SERVER['PHP_AUTH_PW'] : '';

if ($user !== 'mauro' || $pwd !== '1234') {
	die;
}
//-- Autenticacion via HTTP
//-------------------------------<
*/


/*
//-- Autenticacion via HMAC
//------------------------------->
if (!array_key_exists('HTTP_X_HASH',$_SERVER) || !array_key_exists('HTTP_X_TIMESTAMP',$_SERVER) || !array_key_exists('HTTP_X_UID',$_SERVER)) {
	die;
}

list($hash,$uid,$timestamp) = [
	$_SERVER['HTTP_X_HASH'],
	$_SERVER['HTTP_X_UID'],
	$_SERVER['HTTP_X_TIMESTAMP']
];

$secret = 'Sh!! No se lo cuentes a nadie!';

$newHash = sha1($uid.$timestamp.$secret);

if ($newHash !== $hash) {
	die;
}
// Autenticacion via HMAC
//-------------------------------<
*/



/*
// Autenticación vía Access Tokens
//------------------------------->
if (!array_key_exists('HTTP_X_TOKEN',$_SERVER)) {
	http_response_code(401);
	die;
}
$url = 'http://localhost:8001';

$ch = curl_init($url);
curl_setopt(
	$ch,
	CURLOPT_HTTPHEADER,
	[
		"X-Token: {$_SERVER['HTTP_X_TOKEN']}"
	]
);
curl_setopt(
	$ch,
	CURLOPT_RETURNTRANSFER,
	true
);
$ret = curl_exec($ch);
if ($ret !== 'true'){
	http_response_code(403);
	die;
}
// Autenticación vía Access Tokens
//-------------------------------<
*/


// Definimos los recursos disponibles
$allowedResourceTypes = [
	'books',
	'authors',
	'genres',
];

// Validamos que el recurso este disponible
$resourceType = $_GET['resource_type'];

if (!in_array($resourceType,$allowedResourceTypes)) {
	http_response_code(400);
	die;
}

// Defino los recursos
$books = [
    1 => [
        'titulo' => 'Lo que el viento se llevo',
        'id_autor' => 2,
        'id_genero' => 2,
    ],
    2 => [
        'titulo' => 'La Iliada',
        'id_autor' => 1,
        'id_genero' => 1,
    ],
    3 => [
        'titulo' => 'La Odisea',
        'id_autor' => 1,
        'id_genero' => 1,
    ],
];

// Se indica al cliente que lo que recibirá es un json
header('Content-Type: application/json');

// Levantamos el id del recurso buscado
// utilizando un operador ternario
$resourceId = array_key_exists('resource_id', $_GET) ? $_GET['resource_id'] : '';

// Generamos la respuesta asumiendo que el pedido es correcto
switch (strtoupper($_SERVER['REQUEST_METHOD'])) {
	case 'GET':
		if (empty($resourceId)) {
			echo json_encode($books);
		} else {
			if (array_key_exists($resourceId,$books)) {
				echo json_encode($books[$resourceId]);
			} else {
				http_response_code(404);
			}
		}
		break;

	case 'POST':
		$json = file_get_contents('php://input');
		$books[] = json_decode($json,true);
		//echo array_keys($books)[count($books)-1];
		end($books);         // move the internal pointer to the end of the array
		$key = key($books);  // fetches the key of the element pointed to by the internal pointer
		echo json_encode($books[$key]);
 		break;

	case 'PUT':
		// Validamos que el recurso buscado exista
		if (!empty($resourceId) && array_key_exists($resourceId,$books)) {
			// Tomamos la entrada curda
			$json = file_get_contents('php://input');

			// Tansformamos el json recibido a un nuevo elemento
			$books[$resourceId] = json_decode($json,true);

			echo json_encode($books[$resourceId]);
		}
		break;

	case 'DELETE':
		// Validamos que el recurso buscado exista
		if (!empty($resourceId) && array_key_exists($resourceId,$books)) {
			unset($books[$resourceId]);
			echo json_encode($books);
		}
		break;
}



// Inicio el servidor en la terminal 1
// php -S localhost:8000 server.php

// Terminal 2 ejecutar 
// curl http://localhost:8000 -v
// curl http://localhost:8000/\?resource_type\=books
// curl http://localhost:8000/\?resource_type\=books | jq

HENRY DSANTIAGO

hace 4 años

Ayuda por favor.
Este es mi método POST en el server.php


    case 'POST':

        //Tomamos la entrada "cruda"
        $json = file_get_contents('php://input');

        //Transformamos el json recibido a un nuevo elemento del arreglo
        $books[] = json_decode( $json, true);

        //Devuelve el nuevo número identificador del libro recién añadido
        echo array_keys($books)[count($books) - 1];

        //Devuelve el arreglo de libros como si fuese GET
        echo json_encode( $books );
    
    break;```

Y este es mi script de agregar un nuevo libro:

$(’#bookSave’).click( function(){
var newBook = {
‘titulo’: $(’#bookTitle’).val(),
‘id_autor’: $(’#bookAuthorId’).val(),
‘id_genero’: $(’#bookGenreId’).val()
}

        console.log(JSON.stringify(newBook));

        $('#messages').first('p').text('Guardando Libro...');
        $('#messages').show();

        $.ajax({
            'url': 'http://localhost:8000/books',
            'method' : 'POST',
            'data' : JSON.stringify( newBook ),
            'beforeSend': function(){
                console.log('Agregando libro...');
            },
            'success' : function( data ) {
                $('#messages').hide();
                addBook( newBook );                    
            }
        }); 

});```

El problema es que no se carga el nuevo libro en la página. Coloqué un ‘beforeSend’, el cual al darle click al botón agregar, me envía en consola el mensaje “Agregando libro…” y esto sí se ejecuta, pero al parecer el problema está en el ‘success’, es como si nunca se ejecutara. Entonces no sé como solucionarlo, si alguien sabe, le agradezco me ayude con eso.

Adrián de los Reyes

hace 2 años

Viendo los comentarios, fue necesario cambiar el metodo ‘POST’, comparto el código que subió un comañero:

case 'POST':
       // viene en formato json, lo convertimos a arreglo
       $json = file_get_contents('php://input');
       // agregamos un nuevo libro, decodificando el texto que recibimos
       $books[] = json_decode($json, true);

       end($books);         // move the internal pointer to the endof the array
       $key = key($books);  // fetches the key of the element pointed toby the internal pointer
       
       // imprimo todos los libros
       echo json_encode($books);
        break;

Martín Fernando López Moguel

hace 2 años

Captura de pantalla de 2021-10-26 18-39-16.png

Cristian Pisco

hace 4 años

En el AJAX cuando se hace el request a localhost:8000/books, no viene el Json, sino el HTML, pensé que corrigiendo el router.php se arreglaba. ¿Qué estoy haciendo mal?

platzerito02112019 platzerito02112019

hace 4 años

router.php

<?php

$matches = $_GET = [];

// Excepcion para las  url principal sea index.html
if (in_array( $_SERVER["REQUEST_URI"], [ '/index.html', '/', '' ] )) {
    echo file_get_contents( 'E:\curso de API - REST\index.html' );
    die;
}

if (preg_match('/\/([^\/]+)\/([^\/]+)/', $_SERVER["REQUEST_URI"], $matches)) {
    $_GET['resource_type'] = $matches[1];
    $_GET['resource_id'] = $matches[2];
    
    require 'server.php';
} elseif ( preg_match('/\/([^\/]+)\/?/', $_SERVER["REQUEST_URI"], $matches) ) {
    $_GET['resource_type'] = $matches[1];
    
    require 'server.php';
} else {
    error_log('No matches');
    http_response_code( 404 );
}

caramirezc

hace 4 años

código añadido a index.html

$('#bookSave').click( function( ) {
        var newBook = {
            titulo: $('#bookTitle').val(),
            id_autor: $('#bookAuthorId').val(),
            id_genero: $('#bookGenreId').val(),
        }

        $('#messages').first('p').text('Guardando libro...');
        $('#messages').show();
        
        $.ajax( {
            'url': window.location.href + (window.location.href.substr(window.location.href.length - 1) == '/' ? '' : '/' ) + 'books',
            'method': 'POST',
            'data': JSON.stringify( newBook ),
            'success' : function( data ) {
                $('#messages').hide();
                addBook( newBook );
            }
        });
    });

Christian David Sánchez

hace 4 años

POST con AJAX

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Paul Cortes

hace 4 años

Excelente explicación sobre el POST desde AJAX, buena esa por el ajuste del router.php 👍🏻

José Luis Cuevas Del Canto

hace 4 años

Excelente 😃

Luis Daniel Mendoza Rodríguez

hace 3 años

JAJAJAJAJAJAJ esta aclaración hubiera estado bien al principio de todo, yo levante otro servidor jajaja pero bueno, supongo que debí saberlo, parezco nuevo

Juan Camilo Avilés Espinosa

hace 3 años

La verdad en todo el tema, siempre me mostro indefine, no logre solucionarlo, espero hacerlo algún día, si alguien encuentra otra solución.

German Vera

hace 3 años

Super, a pesar de que me costaba al ejecutar el servicio, tenia ciertos errores, pero con los ejemplos de los compañeros, se resuelve…

Santiago Lago

hace 3 años

Hay algun curso asi en Javascript? No se de php pero quiero aprender el tema de APis asi que lo veo igual jaja

RetaxMaster

Profe Platzi

hace 3 años

Al igual que con $.get, jQuery también tiene un método $.post para hacer peticiones vía post:D!