Post via Ajax

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 Abdel Rangel Castro

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

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

Luis Abdel Rangel Castro

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

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 3 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 3 años

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

Cristian Pisco Intriago

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

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

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_sc96

POST con AJAX

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

Paul Cortes

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

José Luis Cuevas Del Canto

Excelente 😃

Luis Daniel Mendoza Rodríguez

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

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

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

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

RetaxMaster