PHP Envió y respuesta de datos mediante Ajax de Juery para luego trabajarlos con Javascript

PHP enviar los datos mediante Ajax de jquery y al obtener la respuesta trabajarla con Javascript.

Puedes apoyarnos para continuar con este espacio dedicado para ti! ♥

- Crear una base datos con xampp, en el ejemplo se llamara peliculas y la tabla categorias (en las columnas de la tabla todas tendrán en tipo de datos varchar).

2.- Crear el archivo conexionDB.php que tendrá la conexión hacia la base de datos. Este es un ejemplo únicamente de prueba, el énfasis que se desea resaltar es ver exclusivamente el envió y respuesta de datos, se realiza la conexión con cuatro parámetros empezando con el servidor que en este caso es el localhost, nombre de usuario, contraseña y por ultimo el nombre de la base de datos, se hace una validación para saber si la comunicación ha sido correcta.

3.- Crear el archivo index.html previamente con los enlaces a los archivos php y js, el contenido del formulario es básicamente una etiqueta seguida de una caja de texto y un botón como se muestra en la imagen.

4.-Crear el archivo envio.js , y cuando reciba el click el botón consultar se obtiene el valor que el usuario escribió en la caja de texto, en una variable llamada genero y posteriormente se envía por ajax de jquery al archivo proceso.php, por método post, y en data se pasa el parámetro con su valor para luego esperar la respuesta en .done en el parámetro res pero antes parsearlo ya que viene en objeto JSON y lo debemos de pasar a objeto javascript para poder trabajarlo y mostrarlo en el index.html.

5.- Crear el archivo proceso.php donde se le incluye el archivo conexión a la base de datos, se recibe lo que el usuario envía desde el formulario a través de ajax de jquery, donde en la variable $varAjax se le asigna el valor “accion” con el cual se realiza la consulta mysql y devuelve el resultado de la misma en un string con la representación JSON.

6.-El árbol de los archivos quedaría de la siguiente manera:

7.- Al ponerlo en funcionamiento http://localhost/pruebapelicula/

Se muestra el resultado del objeto javascript con el console.log que colocamos en el archivo envio.js en la linea 12.

Comenta y te responderemos con gusto saludos.

¡Lo único imposible es aquello que no intentas :D!

Puedes apoyarnos