Problema con petición Jquery/Ajax

xcodex · 18 Feb 2020

Hola!, si vien entiendo que usar Ajax puede resultar algo antiguo, eso no quieta que se pueda utilizar

Tengo el siguiente formulario:

HTML:

<form id="form_contacto" class="form-general padding-20" method="POST">
                    <input placeholder="Nombre" id="nombre_usuario" type="text" name="nombre_usuario">
                    <button id="enviar-formulario">Enviar</button>
                <div id="respuesta"></div>
            </form>

JavaScript:

<script>
                $('#enviar-formulario').click(function() {
                    $.ajax({
                        url: 'formulario-contacto.php',
                        type: 'POST',
                        data: $('#form_contacto').serialize(),
                        success: function(res) {
                            $('#respuesta').html(res);
                        }
                    });
                });
            </script>

Ye en el archivo formulario-contacto.php puse lo siguiente solo a modo de prueba:

PHP:

<?php
$nombre = $_POST["nombre_usuario"];
echo 'Hola ' . $nombre;
?>

¿No se supone que debería devolverme el nombre ingresado en el <div id="respuesta"></div>?
Lo raro es que no me aparece ningún tipo de eror en la consola pero tampoco se realiza la acción.

PD: El órden en el que coloqué scripts, formulario y CDN es:
- Formulario
- CDN Jquery
- Script

aclaro por el tema de la cascada.

xcodex · 18 Feb 2020

mateoagudelo dijo:
En el archivo formulario-contacto.php, sí mal no estoy, debes de retornar el resultado con json. 👍

¿Pero AJAX no es XML?

mateoagudelo · 18 Feb 2020

xcodex dijo:
¿Pero AJAX no es XML?

Mire la documentación de JQuery. Suerte!

YeltsinReyes · 18 Feb 2020

@xcodex seguro la pagina se esta recargando, hazlo asi..

JavaScript:

$("#form_contacto").on("submit", function(event){
    
    event.preventDefault();
    
    $.ajax({
        url: 'formulario-contacto.php',
        type: 'POST',
        data: $('#form_contacto').serialize(),
        success: function(res) {
            $('#respuesta').html(res);
        }
    });
 
});

xcodex · 18 Feb 2020

mateoagudelo dijo:
Mire la documentación de JQuery. Suerte!

De todas maneras probé:

PHP:

echo json_encode($nombre);

Y en el script:

JavaScript:

  success: function(res) {
var obj = JSON.parse(res);
$('#respuesta').html(obj);
 }

y todo sigue igual..

xcodex · 18 Feb 2020

YeltsinReyes dijo:

@xcodex seguro la pagina se esta recargando, hazlo asi..

JavaScript:

$("#form_contacto").on("submit", function(event){
   
    event.preventDefault();
   
    $.ajax({
        url: 'formulario-contacto.php',
        type: 'POST',
        data: $('#form_contacto').serialize(),
        success: function(res) {
            $('#respuesta').html(res);
        }
    });

});

Rarísimo, sigue sin funcionar

YeltsinReyes · 18 Feb 2020

@xcodex esta raro, a mi me funciono de una vez!

xcodex · 18 Feb 2020

YeltsinReyes dijo:
@xcodex esta raro, a mi me funciono de una vez!

Ver el archivo adjunto 213331

Disculpa pero aquí voy con otra pregunta:
¿En que órden colocaste scripts y CDN? ¿y qué navegador utilizas?

YeltsinReyes · 18 Feb 2020

xcodex dijo:
Disculpa pero aquí voy con otra pregunta:
¿En que órden colocaste scripts y CDN? ¿y qué navegador utilizas?

Tengo esto y uso chrome.

HTML:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Formulario Ajax</title>
</head>
<body>
    
<form id="form_contacto" class="form-general padding-20" method="POST">
    <input placeholder="Nombre" id="nombre_usuario" type="text" name="nombre_usuario">
    <button id="enviar-formulario">Enviar</button>
    <div id="respuesta"></div>
</form>
    
<script src="//code.jquery.com/jquery.js"></script>

<script>
$("#form_contacto").on("submit", function(event){
    
    event.preventDefault();
    
    $.ajax({
        type: 'POST',
        url: 'formulario-contacto.php',
        data: $('#form_contacto').serialize(),
        success: function(res) {
            $('#respuesta').html(res);
        }
    });
 
});
</script>
    
</body>
</html>

PHP:

<?php
    
$nombre = $_POST["nombre_usuario"];
echo 'Hola ' . $nombre;

?>

xcodex · 18 Feb 2020

YeltsinReyes dijo:

Tengo esto y uso chrome.

HTML:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Formulario Ajax</title>
</head>
<body>
   
<form id="form_contacto" class="form-general padding-20" method="POST">
    <input placeholder="Nombre" id="nombre_usuario" type="text" name="nombre_usuario">
    <button id="enviar-formulario">Enviar</button>
    <div id="respuesta"></div>
</form>
   
<script src="//code.jquery.com/jquery.js"></script>

<script>
$("#form_contacto").on("submit", function(event){
   
    event.preventDefault();
   
    $.ajax({
        type: 'POST',
        url: 'formulario-contacto.php',
        data: $('#form_contacto').serialize(),
        success: function(res) {
            $('#respuesta').html(res);
        }
    });

});
</script>
   
</body>
</html>

PHP:

<?php
   
$nombre = $_POST["nombre_usuario"];
echo 'Hola ' . $nombre;

?>

Probé así y ahora me aparece:
POST http://localhost/formulario-contacto.php[HTTP/1.1 404 Not Found 1ms]

jajaja no entiendo nada

YeltsinReyes · 18 Feb 2020

@xcodex parece que no existe el formulario-contacto.php, fijate bien si tiene el nombre bien!

xcodex · 18 Feb 2020

YeltsinReyes dijo:
@xcodex parece que no existe el formulario-contacto.php, fijate bien si tiene el nombre bien!

UN MILLÓN DE GRACIAS!!!!!!!!!!!!!!!!!!!
Era la ruta del archivo

Sin comentarios, jaja

xcodex · 19 Feb 2020

Subí el código a un servidor y funcionó perfecto, pero me preguntaba si es obligatorio convertir todo a JSON, ya que si no lo hago en mi caso funciona de igual manera.

YeltsinReyes · 19 Feb 2020

xcodex dijo:
Subí el código a un servidor y funcionó perfecto, pero me preguntaba si es obligatorio convertir todo a JSON, ya que si no lo hago en mi caso funciona de igual manera.

No es obligado, todo de pende de como lo quieras usar.
por ejemplo si retornaras html, solo texto o varios datos.

xcodex · 19 Feb 2020

YeltsinReyes dijo:
No es obligado, todo de pende de como lo quieras usar.
por ejemplo si retornaras html, solo texto o varios datos.

En este caso el archivo que puse en el método url de Ajax ingresa información a la BD.

YeltsinReyes · 19 Feb 2020

xcodex dijo:
En este caso el archivo que puse en el método url de Ajax ingresa información a la BD.

Entonces puedes retornar un true o false en texto o json !

xcodex · 19 Feb 2020

YeltsinReyes dijo:
Entonces puedes retornar un true o false en texto o json !

¡Muchas gracias nuevamente! :-D

Andres128 · 29 Feb 2020

xcodex dijo:
Probé así y ahora me aparece:
POST http://localhost/formulario-contacto.php[HTTP/1.1 404 Not Found 1ms]

jajaja no entiendo nada

Si ese 404 es un código que devuelve el servidor frente a un problema o en su caso si fue exitosa la petición devolverá un 200, 201 depende como se configure el script php o el cms como wordpress.

Mira puedes ver el listado aquí:

Anexo:Códigos de estado HTTP - Wikipedia, la enciclopedia libre

es.wikipedia.org

A mi me confundía mucho esto al principio pero es importante saber los básicos para darse una idea del error o en su caso comprobar si todo fue ok

Por ejemplo mira en chorme: Devuelve un 200 OK

En otro sitio web ejemplo: 40defiebre.com/guia-seo/qufghfor-que-necesito

Devuelve un 404 por que al revisar en la base de datos esto: qufghfor-que-necesito devuelve un 404 por que esa entrada no existe, se puede devolver una cabecera así en php:

PHP:

<?php header("HTTP/1.0 404 Not Found"); ?>

HTML:

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
</head>
<body>

MI HTML CUSTOM DE MI 404

</body>
</html>

Ya htaccess o nginx se encargan de redireccionar al archivo 404 custom o los que traen por defecto. Y así con otros códigos 400,401,etc.

Htaccess:

ErrorDocument 403 /403.php
ErrorDocument 404 /404.php

nginx
error_page 403 /403.php;
error_page 404 /404.php;