TransWikia.com

Intento insertar registros con AJAX en php

Stack Overflow en español Asked by Sergio Martinez on January 25, 2021

Hola buenas soy nuevo en esto de ajax y estoy intentando hacer un insert con ajax para no estar todo el tiempo recargando la pagina, pero no se por que no me coge la función que tengo definida en funcion.php para usarla en ajax.php, tengo un main.js que es donde tengo definido el ajax recogiendo el valor del formulario donde dicho formulario esta en vista.php

ajax.php

switch ($action) {    
case 'post':
  insert_client();
    break;

}

main.js

  $('.insert').on('click', function () {
    var insert_prueba = $('#insert_prueba').serialize(),
    action='post'
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: insert_prueba,post,
        sucess: function (r) {
            console.log(r)
            if (r == 1) {
                alert("hola");
                
            } else {
                alert("error");
            }
        }
    });

});

funcion.php

function insert_client()
{

$conexion = conexionBBDD();

$nombre = $_POST['nombre'];
$apellidos = $_POST['apellidos'];
$telefono = $_POST['telefono'];
$correo = $_POST['correo'];
$direccion = $_POST['direccion'];
$dni = $_POST['dni'];
$poblacion = $_POST['poblacion'];
$edad = $_POST['edad'];


$insert = "INSERT into usuarios (Nombre,Apellidos, Telefono, Correo, Dirección, DNI, Población, Edad)
    VALUES ('$nombre','$apellidos',$telefono,'$correo','$direccion','$dni','$poblacion',$edad) ";
echo $insert;
$resultado = $conexion->query($insert);


if ($resultado) {
    echo '<script>alert("hola")</script>';
    // echo "<p>Se ha añadido $conexion->affected_rows registros con exito</p>";
} else {
    echo '<script>alert("error")</script>';

    echo "<p>Tuvimos problemas en la insercion, intentelo de nuevo mas tarde</p>";
}
}

vista.php(donde tengo el formulario)

<table>
    <h1 class="text-center">Insertar Clientes</h1>
    <form id="insert_prueba" action="<?php echo $_SERVER["PHP_SELF"]  ?>" method="POST">
        <div class="form-group">
            <label>Nombre</label>
            <input type="text" class="form-control" name="nombre" placeholder="Ingrese su nombre">
        </div>
        <div class="form-group">
            <label>Apellidos</label>
            <input type="text" class="form-control" name="apellidos" placeholder="Ingrese sus apellidos">
        </div>
        <input type="submit" name="insertar" class="btn btn-primary mb-3 insert" value="Insertar clientes">
    </form>
</table>

One Answer

En Javascript defines action = 'post', pero no estás enviando esa variable en la petición AJAX.

$('.insert').on('click', function () {
    var insert_prueba = $('#insert_prueba').serialize(),
    action='post'
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: insert_prueba,post, // *******
        sucess: function (r) {
            console.log(r)
            if (r == 1) {
                alert("hola");
                
            } else {
                alert("error");
            }
        }
    });

});

Ten por seguro que post no se agrega al formulario, ni es un elemento válido en este código.

Lo más fácil sería agregar un campo oculto:

<h1 class="text-center">Insertar Clientes</h1>
<form id="insert_prueba" action="<?php echo $_SERVER["PHP_SELF"]  ?>" method="POST">
<input type="hidden" name="action" value="post">
    <div class="form-group">
        <label>Nombre</label>
        <input type="text" class="form-control" name="nombre" placeholder="Ingrese su nombre">
    </div>
    <div class="form-group">
        <label>Apellidos</label>
        <input type="text" class="form-control" name="apellidos" placeholder="Ingrese sus apellidos">
    </div>
    <input type="submit" name="insertar" class="btn btn-primary mb-3 insert" value="Insertar clientes">
</form>

Quedando tu función así:

$('.insert').on('click', function () {
    var insert_prueba = $('#insert_prueba').serialize(),
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: insert_prueba,
        sucess: function (r) {
            console.log(r)
            if (r == 1) {
                alert("hola");

            } else {
                alert("error");
            }
        }
    });

});

En PHP ya no tendrás problema para obtener la variable, con asignación ternaria:

$action = (isset($_POST['action'])) ? $_POST['action'] : '';
// Aquí el switch

Por cierto, debes modificar la salida después de realizar la inserción, porque en success esperas 1 y estás enviando etiquetas <script> y no obtendrás el resultado esperado. Cambia todo esto:

if ($resultado) {
    echo '<script>alert("hola")</script>';
    // echo "<p>Se ha añadido $conexion->affected_rows registros con exito</p>";
} else {
    echo '<script>alert("error")</script>';

    echo "<p>Tuvimos problemas en la insercion, intentelo de nuevo mas tarde</p>";
}

Por una sola línea con operador ternario:

// Uno para inserción correcta, cero para error
echo ($resultado) ? 1 : 0;

Answered by Triby on January 25, 2021

Add your own answers!

Ask a Question

Get help from others!

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