7

En mi afán de seguir con mi proyecto, estoy aprendiendo a usar jQuery y Ajax para enviar los datos. En este caso, estoy intentando enviar los datos de un formulario por Ajax hacia un script de php, el cual inserta en la BBDD todo y luego devuelve el dato insertado como respuesta para poder rellenar otra parte de la página con esos datos introducidos.

Lo que estoy haciendo es:

<?php
  // First of all, we must check if the session exists
  session_start();
  $response = array();
  if(isset($_SESSION["addingResume"]["resumeId"])){
    // TODO modify data
    modifyAddingInitialData($_SESSION["addingResume"]["resumeId"]);

  }else{
    addInitialResumeData();
  }

  function modifyAddingInitialData($resumeId){
    unset($_SESSION["addingResume"]["resumeId"]);
  }
  function addInitialResumeData(){
    // In this case, we will create
    // Create a new Resume
    include('dbConfig.php');
    $sql = $mysqli->prepare("INSERT INTO `cv` (`id`, `name`, `firstSurname`, `secondSurname`,
                                              `phone`, `secondPhone`, `address`, `mail`,`birthdate`)
                             VALUES(NULL,?,?,?,?,?,?,?,?);");
    if(!(empty($_POST["cvName"]) && empty($_POST["surname1"]) && empty($_POST["phone1"])
        && empty($_POST["cvMail"]) && empty($_POST["birthdate"]))){
      // Check now if we have extra data
      $name = $_POST["cvName"];
      $surname1 = $_POST["surname1"];
      $phone1 = $_POST["phone1"];
      $cvMail = $_POST["cvMail"];
      $surname2 = " ";
      $phone2 = " ";
      $address = " ";
      $birthdate = $_POST["birthdate"];
      if(!empty($_POST["surname2"])){
        $surname2 = $_POST["surname2"];
      }
      if(!empty($_POST["phone2"])){
        $phone2 = $_POST["surname2"];
      }
      if(!empty($_POST["address"])){
        $address = $_POST["surname2"];
      }

      // Preparing the sql
      if ($sql == false) {
          $response["status"] = "Error while trying to create the SQL";
      }

      $result = $sql->bind_param("ssssssss", $name, $surname1,$surname2, $phone1,$phone2,$address,$cvMail, $birthdate);
      if ($result == false) {
          $response["status"] = "Error while trying to create the SQL";
      }

      $result = $sql->execute();
      if ($result == false) {
          $response["status"] = "Error while trying to execute the SQL";
      }else{
        // All worked fine
        $lastid = mysqli_insert_id($mysqli);
        $_SESSION["addingResume"]["resumeId"] = $lastid;
        showModifiedForm($lastid);
      }
    }else{
      $response["status"] = "Error while trying recieve the data";
    }
    $mysqli->close();

  }

  function showModifiedForm($formId){
    include('dbConfig.php');
    if($_SESSION["addingResume"]["resumeId"] === $formId){
      // Obtain data
      $sql = "SELECT `name`, `firstSurname`,`SecondSurname`,
                    `phone`,`secondPhone`,`address`,`mail`,`birthdate`
              FROM cv WHERE id = '$formId'";

      if($result = $mysqli->query($sql)){
        if($row = $result->fetch_assoc()){
          // Return all data in a json
          $response["status"] = "ok";
          $response["body"] = $row;
          header('Content-type: application/json; charset=utf-8');
          print_r(json_encode($response));
        }
      }else{
        $response["status"] = "Failure at creating SQL";
      }
    }
    $mysqli->close();
  }
 ?>

Este script de php que, hará un json_encode como respuesta

$(document).ready(function() {
  $('#initialFormError').fadeOut();
  $('form[id=\'initialCVDataForm\']').on('submit', function(e) {
    e.preventDefault();
    $("#initialFormError").fadeOut();
    var data = $(this).serialize();
    $.ajax({
      type: 'POST',
      url: '../php/initialCVDataFormProcess.php',
      data: data,
      dataType: 'json',
      beforeSend: function() {
        $('#initialFormError').fadeOut();
        $('#btnSaveInitialData').html('Saving ...');
      },
      success: function(response) {
        if (response["status"] === 'ok') {
          $('#btnSaveInitialData').html('Save data');
          $('#cvName').val(response.name);
          $('#aditionalCVDataForm').show();
          setTimeout(' window.location.href = "../models/addResume.php#aditionalCVDataForm"; ', 3000);
        } else {
          $('#initialFormError').fadeIn(1000, function() {
            $('#initialFormError').html(response['status']);
            $('#btnSaveInitialData').html('Save data');
          });
        }
      },
    });
    return false;
  });
});

y se enviará al script anterior para poder usarse.

Mi idea era crear un array el cual tuviera el staus y por otro lado el cuerpo, que luego fuera codificado a json pero no entiendo cómo puedo devolver el objeto json por Ajax ni cómo manipularlo.

Edito:

La finalidad es poder utilizar esos datos devueltos por jSon para mostrar en el value del formulario los datos obtenidos de la BBDD.

Por otra parte, según leo en la respuestas, no debería mostrar varias salidas.

Tras mostrar una única salida, el botón se queda en Sending... (envía los datos a la BBDD) pero la respuesta no llega.

Editado

Tras volver a mirar el código, parece que tenía algunos errores de programación que he resuelto.

La cuestión ahora es que la respuesta se envía (a veces tengo que pulsar dos veces el botón para que surta efecto) pero el control del formulario pierde su value en cuanto intento asignarle uno nuevo.

Código del formulario en cuestión:

<form id="initialCVDataForm" method="post">
          <div class="formDataContainer">
            <div class="personalDataCategory"><h2 class="categoryTitle">Initial data</h4>
              <div id="initialFormError"><!-- Error will be shown here ! --></div>
              <label for="cvName"><span class="labelText">Name</span></label>
              <input type="text" id="cvName" placeholder="Name" name="cvName" minlength="2" maxlength="100" required value=''>
              <label for="surname1"><span class="labelText">Surname 1</span></label>
              <input type="text" class='formInputLeft' placeholder="Surname 1" name="surname1" minlength="2" maxlength="100" required value=''>
              <label for="surname2"><span class="labelText">Surname 2</span></label>
              <input type="text" placeholder="Surname 2" name="surname2" minlength="2" maxlength="100" value=''>

              <label for="phone1"><span class="labelText">Phone number</span></label>
              <input type="number" placeholder="phone" name="phone1" minlength="2"  required value=''>

              <label for="phone2"><span class="labelText">Phone number 2</span></label>
              <input type="number" placeholder="phone" name="phone2" minlength="2" autocapitalize="off" value=''>

              <label for="address"><span class="labelText">Address</span></label>
              <input type="text" placeholder="address" name="address" minlength="10" maxlength="300" autocapitalize="off" value=''>

              <label for="cvMail"><span class="labelText">Email</span></label>
              <input type="email" placeholder="Enter email" id="cvMail" name="cvMail" autocapitalize="off" required value=''>

              <label for="birthdate"><span class="labelText">Birthdate</span></label>
              <input type="date" id="birthdate" name="birthdate" required value=''>

              <button id="btnCancel" name="btnReturnHomeInitialDataForm" onclick="location.href = 'userPanel.php';">Return to home</button>
              <button type="submit" id="btnSaveInitialData" name="btnSaveInitialData">Save data</button>
            </div>
          </form>

Gracias por todo.

1
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – lois6b
    el 19 abr. 2018 a las 14:39

1 respuesta 1

0

Un ejemplo de recibir datos de un php en formato JSON es este:

    var ArDatos = []


function recogerDatos() {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var datos = JSON.parse(this.responseText);

            for (let i = 0; i < datos.length; i++) {
                ArDatos.push(datos[i]);
            }

            crearBtns();
        }
    };
    xmlhttp.open("GET", "php/datos.php", true);

    xmlhttp.send();
}

Un ejemplo de enviar datos es este:

var infoParaEnviar = {
            datos: dato
        };
        $.ajax({
            type: "POST",
            url: "php/insertar.php",
            data: infoParaEnviar,
            dataType: "text",
            asycn: false,
            success: function () {

            }
        });

Recibir datos php:

$datos = $_POST['datos'];

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.