No tienes acceso a esta clase

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

Post via Ajax

17/19
Recursos

Aportes 18

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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);
}

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>

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

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

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.

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;

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?

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 );
}

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 );
            }
        });
    });

POST con AJAX

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

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

Excelente 😃

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

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.

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

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

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