0

soy nuevo en programación y estoy intentando hacer una simple petición con ajax pero no me sale, lo único que pretendo es que la respuesta del servidor me imprima una cadena en mi index.html.

Éste es mi código javascript:

$(document).ready(function(){

$('#submit').click(function(e){
    let value = $('#task').val();
    $.ajax({
        url: 'add.php',
        type:'POST',
        dataType: 'json',
        data: {'value':value},
        success: function(response){
            var data = $.parseJSON(response);
            console.log(response);
            $('#output').append(data);
        },
        error: function(){
            console.log('error');
            alert('error!!');
        }
    });
});

Y éste mi código php:

<?php
   if(!empty($_POST['task'])){
   $data = $_POST['task'];
   echo json_encode($data) ;
   }
?>

Por favor, ¿alguien puede ayudarme?

Gracias de antemano.

1
  • 1
    A simple vista dos cosas parece que esten mal: 1) Te falta agregar esto al final del script: }); pues no está bien cerrado (a menos que lo hayas pegado mal desde tu código). Y 2) ¿Por qué $_POST['task']? En todo caso seria $_POST['value'] pues el task ese no aparece en ninguna otra parte. A menos que esto este mal: data: {'value':value}, y lo cambies por data: {'task':value},
    – masterguru
    Commented el 19 mar. 2022 a las 17:00

3 respuestas 3

0

Tal como te he dicho en los comentarios mucho antes que la otra respuesta, el problema es el nombre de campo que envias en data::

    data: {'value':value},

el cual puedes cambiar por

    data: {'task':value},

y con eso ya estaria solucionado el problema del nombre de campo.

Recuerda también que tal como has pegado el código, te falta terminar el script correctamente agregando un cierre más de llaves + paréntesis al final.

O sea, finalmente debe quedar así:

$(document).ready(function() {
  $('#submit').click(function(e) {
    let value = $('#task').val();
    $.ajax({
      url: 'add.php',
      type: 'POST',
      dataType: 'json',
      data: {
        'task': value
      },
      success: function(response) {
        var data = $.parseJSON(response);
        console.log(response);
        $('#output').append(data);
      },
      error: function() {
        console.log('error');
        alert('error!!');
      }
    });
  });
});

La otra solución seria modificar el PHP sin cambiar el nombre del campo en el javascript, dejándolo así:

<?php
   if(!empty($_POST['value'])){
       $data = $_POST['value'];
       echo json_encode($data) ;
   }
?>
1
  • Efectivamente, estaba pasando mal el nombre del campo. Con respecto a la llave y el paréntesis que faltaban, es que lo había pegado mal desde mi editor. Ya funciona Gracias!!! Commented el 20 mar. 2022 a las 18:42
0

El problemas es el campo que envias en data: cambialo por

data: {'task':value},

O cambia el codigo en el archivo por:

<?php
   if(!empty($_POST['value'])){
   $data = $_POST['value'];
   echo json_encode($data) ;
   }
?>
0

Asumiendo que la estructura de tu formulario es algo similar a lo mostrado abajo:

  • como mencionan arriba estás enviando data y estás buscando task en el objeto POST.
  • en el PHP estás retornando un string, y deberías de devolver un array para que al parsear la respuesta no te de un error de un Json invalido.
  • No es necesario parsear la respuesta si tienes los mime type correctos, Jquery se encarga de eso, como en HTML abajo, si ves le agrego al Output el contenido de response.task pues retorno el mismo array POST que tiene una key task.
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <h1>Test</h1>
  <form>
    <input type="text" name="task" id="task" value="Test">
    <input type="submit" id="submit"></submit>
  </form>
  <div id="output"></div>
  <script>
    $(document).ready(function() {
      $('#submit').click(function(e) {
        e.preventDefault();
        let value = $('#task').val();
        $.ajax({
          url: '/url/',
          type: 'POST',
          dataType: 'json',
          data: {
            task: value
          },
          success: function(response) {
            console.log(response);
            $('#output').append(response.task);
          },
          error: function() {
            console.log('error');
          },
        });

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

</html>
<?php
header('Content-Type: application/json; charset=utf-8');

if (!empty($_POST['task'])) {
    $data = $_POST['task'];
    echo json_encode($_POST);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.