AnswerBun.com

¿Como puedo mostrar una peticion Ajax POST en el HTML?

Stack Overflow en español Asked on January 6, 2022

he intentado de todo para poder mostrar un POST en HTML con un APIrest de reqres.in intentando poner los datos que introduzca el usuario en los inputs en un cuadro pero me ha parecido particularmente dificil.

Me gustaria que los datos que introduzca el usuario aparecieran dentro del cuadro de #caja, pero a pesar de todo me sigue apareciendo el siguiente mensaje de error en la consola:

Uncaught TypeError: Cannot read property ‘forEach’ of undefined
at Object.success (ajax.js:35)

HTML:

<form action="https://reqres.in/api/users" method="POST" id="formulario">
        <p>
            Nombre: <input type="text" name="name">
        </p>
        <p>
            Web: <input type="text" name="web">
        </p>
        <p>
            <input type="submit" value="Registrar" id="submit">
        </p>
    </form>
    <span id="aviso">Usuario Registrado con Exito</span>
    <div id="datos">

    </div>

JS:

$("#formulario").click(function(response){
        response.preventDefault();

        var usuario = {
            "nombre": $('input[name="name"]').val(),
            "web": $('input[name="web"]').val()
        }

        $.post($(this).attr("action"), usuario, function(response){
            console.log(response);

        usuario.response.forEach(function(element){
                $("#datos").append("<ul><li><p>"+element+"</p></li></ul>");
        });
        return false;
        });

    });

One Answer

primero que nada debemos conocer que respuesta te devuelve el servicio https://reqres.in/api/users y haciendo un par de pruebas la respuesta es la siguiente:

{
    "nombre": "Juan",
    "web": "www.google.com",
    "id": "578",
    "createdAt": "2020-07-24T23:24:47.951Z"
}

Ahora, por cómo lo veo, deberías trabajar con el objeto de respuesta que obtienes como resultado (el que vemos arriba que tiene 4 propiedades).

Por otro lado, el error del forEach es por que en primer lugar la propiedad usuario.response es undefined ya que el objeto usuario no tiene dicha propiedad y la sentencia forEach no puede iterar sobre una propiedad no definida.

Por último, la información que deberias mostrar dentro del div podría ser algo como:

var datos = $('<ul></ul>');
var name = $('<li></li>').text(response.nombre).appendTo(datos);
var name = $('<li></li>').text(response.web).appendTo(datos);
var name = $('<li></li>').text(response.id).appendTo(datos);
$("#datos").append(datos);

Saludos.

Answered by Fernando Jiménez on January 6, 2022

Add your own answers!

Related Questions

problema con formulario en laravel

0  Asked on January 1, 2021 by guillermo-albornoz

   

Botón permanezca cambiado de color al ser usado

0  Asked on January 1, 2021 by jose-velasquez

     

¿Cómo puedo encontrar el centroide sin que me de error?

1  Asked on December 31, 2020 by sheccid-selene-corts-servn

       

fallo en fetch js para enviar un dato usando boton (js)

1  Asked on December 31, 2020 by programando

   

Fullcalendar problema con actualizar eventos

0  Asked on December 30, 2020 by matiri90

       

Iterar tuplas y asignar variables por cada iteración

1  Asked on December 30, 2020 by carlos-chavita

 

INNER JOIN entre dos tablas

1  Asked on December 29, 2020 by miguel-ngel-martn

 

¿Cómo sumar 1 en un array?

2  Asked on December 29, 2020 by armando-sarmiento

   

Sumar tiempos tipo TIME en MySQL

1  Asked on December 28, 2020 by ignacio-fuentes

   

Buscar un input dentro de una tabla datatable

2  Asked on December 28, 2020 by jonathan-cunza

   

Abrir un PDF desde un ListBox en C#

1  Asked on December 27, 2020 by ricardo-vazquez

     

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP