1

Cual es la manera correcta de realizar una insercion de datos con AJAX. He visto varios tutoriales, pero son muy diferentes y algo confuso.

Algunas usan este codigo

xmlhttp=new XMLHttpRequest();

y otro no. Algunos declaran variables para cada input que desean ingresar, otros simplemente usan el id del formulario.

Y no se cual es la forma mas eficiente de realizar el registro.

Tengo el siguiente formulario(algo simple con lo que quiero empezar):

formulario.php

<form id="formulario" action=""  method="POST">
        <div class="form-group">
          <label for="idnombre">Nombre:</label>
          <input type="text" class="form-control" id="idnombre" name="namenombre" placeholder="Ingresar Nombre">
        </div>

        <div class="form-group">
          <label for="idapellido">Apellido:</label>
          <input type="text" class="form-control" id="idapellido" name="nameapellido" placeholder="Ingresar Apellido">
        </div>

        <div class="form-group">
          <label for="idedad">Edad:</label>
          <input type="text" class="form-control" id="idedad" name="nameedad" placeholder="Ingresar Edad">
        </div>

        <button type="submit" id="button" class="btn btn-default">Registrar</button>
</form>

insertar.php

<?php 
$servername = "localhost";
$username = "username";
$password = "";
$dbname = "demo";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

        $nombre = $_POST['namenombre'];
        $apellido = $_POST['nameapellido'];
        $edad = $_POST['nameedad'];


$sql = "INSERT INTO persona (nombre, apellido, edad) VALUES ('$nombre', '$apellido', '$edad')";

if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();

?>

Ademas de mostrar un alert de bootstrap:

  <div class="alert alert-success">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>

Como podría hacerlo? Gracias de antemano.

3 respuestas 3

2

Lo que deberías utilizar es jQuery para tomar los datos del formulario utilizando la función serialize.

Por ejemplo:

<form name="miformulario" id="myfor">
  <input type="text" name="elemento1">
  <input type="text" name="elemento2">
  <input type="text" name="elemento3">
  <select name="options">
    <option value="1">choise 1</option>
    <option value="2">choise 2</option>
    <option value="3">choise 3</option>
  </select>
</form>

<script type="text/javascript">
  $('#myform').on('submit', function(e)) {
  e.preventDefault(); // Evitas que haga el submit por default

  var datosFormulario = $(this).serialize();

  $.ajax({
    type: "POST",
    url: "insertar.php",
    data: datosFormulario,
    success: function(data) {
    }
  });
  });
</script>

Y desde el php utilizas la función parse_str para convertir los datos a un array que puedas manejar.

<?php
$params = array();
parse_str($_GET, $params);

echo $params['elemento1'];
echo $params['elemento2'];

?>
1

Con este script es más facial, pruébalo:

function agregaRegistro(){
    var url = 'insertar.php';
    $.ajax({
        type:'POST',
        url:url,
        data:$('#formpost').serialize(),
        success: function(registro){
            $('#formulario')[0].reset();
            $("#cargando").html(data);
        }
    });
    return false;
}

Tu form queda así:

<form id="formulario" action="" onsubmit="return agregaRegistro();" method="POST">
    <div class="form-group">
        <label for="idnombre">Nombre:</label>
        <input
            type="text"
            class="form-control"
            id="idnombre"
            name="namenombre"
            placeholder="Ingresar Nombre"
        >
    </div>
    <div class="form-group">
        <label for="idapellido">Apellido:</label>
        <input
            type="text"
            class="form-control"
            id="idapellido"
            name="nameapellido"
            placeholder="Ingresar Apellido"
        >
    </div>
    <div class="form-group">
        <label for="idedad">Edad:</label>
        <input
            type="text"
            class="form-control"
            id="idedad"
            name="nameedad"
            placeholder="Ingresar Edad"
        >
    </div>
    <button type="submit" id="button" class="btn btn-default">Registrar</button>
</form>
1

ajax(); es una función de jquery y jquery es un framework desarrollado en javascript.

  • Para que pueda funcionar requieres una librería, por así decirlo que es jaquery.js y hay diferentes versiones .
  • Como se encuentra en el front-end este ayuda a enviar información de un formulario a un lenguaje de programación back-end como php y java.
  • A diferencia de la forma tradicional puedes enviar o toda la información de tu formulario o secciones.

ejemplo:

   $.ajax({  
                url:"/agregarUsuario.php", //direccion de tu php o java(Utiliza servlets)
                type:'POST', // metodo POST es equivalente a <form method="POST" >
                data:{ParametroIDombre:$("#namenombre").val()},//parametros que resiviras en el php en metodo post $_POST["ParametroIDombre"] <-- obtienes de acuerdo a como lo declaraste en el data no con el name del form
                success: function( resp ) {
                        alert(resp);
//por medios de el atributo id="" puedes pintar información en tu html
 //o puedes crear otras funciones o tomar decisiones  cuando la respuesta fue OK                    

                },
                error:function(error){
                    console.error(error);
                }
            });

        }

Espero te sirva la información que te proporciono puedes ver mas detalles de ajax en : http://api.jquery.com/jquery.ajax/

Tu Respuesta

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

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