0

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>
11
  • ¿La consola devuelve algún error?
    – user128299
    Commented el 22 jul. 2020 a las 17:42
  • No devuelve ningún error Commented el 22 jul. 2020 a las 17:43
  • Por favor edita la pregunta para agregar código del formulario.
    – Triby
    Commented el 22 jul. 2020 a las 17:49
  • Pareciera que ,post esta demas aqui : data: insert_prueba,post, dejalo solo en data:insert_prueba,. action=post esta incluido en el form o lo deseas agregar al envio?
    – F.Igor
    Commented el 22 jul. 2020 a las 17:49
  • Estás mandando la petición a un archivo llamado ajax.php, como indicas aquí: url: 'ajax.php', pero en la pregunta dices que el archivo que maneja la petición se llama funcion.php, si es así, la petición no está llegando.
    – A. Cedano
    Commented el 22 jul. 2020 a las 17:58

1 respuesta 1

0

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;
14
  • Yo no agregaría un campo oculto. En el data que se envía vía Ajax se pueden agregar pares a mano. Por ejemplo: action : 'post' o cualquier otro. Dado que se está usando serialize, se puede agregar así: var insert_prueba = $('#insert_prueba').serialize()+"&action=post"; así el código queda más libre y se evitan elementos ocultos en el HTML.
    – A. Cedano
    Commented el 22 jul. 2020 a las 18:44
  • @A.Cedano, por eso puse que lo más fácil sería.... Yo prefiero FormData en lugar de serializar, porque te permite agregar datos sin mayor problema. Ya que viste dónde está el error, eres bienvenido si quieres colaborar con otra respuesta mejor elaborada.
    – Triby
    Commented el 22 jul. 2020 a las 18:48
  • No suelo responder cuando hay respuestas bien encaminadas. La intención del comentario es que mejores la respuesta, si quieres. En el código original OP tiene una solución parecida a lo que comento, sólo que no agrega bien el parámetro action, me parece que recomendarle un campo oculto para resolver algo que puede resolverse con una simple concatenación incita a malas prácticas y además se aleja de su intención original.
    – A. Cedano
    Commented el 22 jul. 2020 a las 18:50
  • ¿Por qué es mala práctica agregar un campo oculto? Yo suelo incluir la acción de esta forma o, en su defecto, como parámetro en la URL. ¿Tienes alguna referencia al respecto? Me gustaría leerla para saber qué estoy haciendo mal.
    – Triby
    Commented el 22 jul. 2020 a las 18:53
  • Es una mala práctica porque no se necesita, porque puedes prescindir de ello, porque no hace falta recargar el código para algo que puedes resolver simplemente con esto: +"&action=post" en el código JS, porque haces el código más dependiente metiendo en el HTML algo que pertenece a la lógica de tu programa. Imaginemos un programa grande con varios miles de formulario donde pusiste el action en un campo oculto del HTML. Si mañana hay algún cambio tendrás que ir a los miles de formularios a modificar tus campos ocultos. Si lo centralizas en el código JS ese cambio será más fácil.
    – A. Cedano
    Commented el 22 jul. 2020 a las 18:57

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.