[SOLUCIONADO] $.ajax(); no responde

[legomolina]

Buenas.
Necesito que una página inserte unos datos de un formulario en una BD MySql pero sin que se "recargue" la página, por eso recurrí a la librería jQuery, especificamente a $.ajax();
La cosa es que sigo las instrucciones pero no va. Aquí dejo el código:

Código Javascript:

function insertar() {
        var datos_insertar={};
        for (i=0; i<nombrecol.length; i++) {
            datos_insertar[nombrecol[i]]=document.getElementById(nombrecol[i]).value;
        }
        alert('Se envia');
        var request = $.ajax({
          url: "insertar.php",
          type: "POST",
          data: datos_insertar,
        });
         
        request.done(function( msg ) {
          alert( msg );
        });
         
        request.fail(function( jqXHR, textStatus ) {
          alert( "Request failed: " + textStatus );
        }); 
    }
 

Y el form:

Código HTML:

<form class="formulario_clientes" id="formulario_clientes" onSubmit="insertar()">
                <label for="codigo">Codigo: </label><input name="codigo" id="codigo" value="" type="text" size="3" disabled><br>
                <label for="nombre">Nombre: </label><input  name="nombre" id="nombre" value="" type="text" size="77" disabled><br>
                <label for="domicilio">Domicilio: </label><input name="domicilio" id="domicilio" value="" size="77" type="text" disabled><br>
                <label for="cp">Código Postal: </label><input name="cp" id="cp" value="" size="5" type="text" disabled required><br>
				<label for="provincia">Provincia: </label><input name="provincia" id="provincia" value="" size="77" type="text" disabled><br>
            	<label for="dni">DNI: </label><input name="dni" id="dni" value="" size="10" type="text" disabled required><br>
            	<label for="telefono">Teléfono: </label><input name="telefono" id="telefono" value="" size="10" type="text" disabled>
            	<label style="width:50px;" for="movil">Móvil: </label><input name="movil" id="movil" value="" size="10" type="text" disabled>
            	<label style="width:50px;" for="fax">Fax: </label><input name="fax" id="fax" value="" size="10" type="text" disabled><br>
            	<label for="email">Email: </label><input name="email" id="email" value="" size="77" type="text" disabled><br>
            	<label for="observaciones">Observaciones: </label><textarea name="observaciones" id="observaciones" cols="59" disabled></textarea><br>
            	<button type="submit">Enviar</button>
            </form> 

Y la página insertar.php que lo único que hace es introducir los valores del form en la bd y mostrar el msg de si se ha hecho correctamente o no:

Código PHP:

  <?php 
include("../Conexiones/conexion.php"); 
 
$nombre=$_POST['nombre']; 
$cod=$_POST['codigo']; 
 
$sql="INSERT INTO prueba (nom,cod) values('".$nombre."','".$cod."')"; 
$res=$db->query($sql); 
 
if($res) 
    echo 'Accion exitosa'; 
else 
    echo "Mal";     
?>   

Estoy muy seguro de que es una tontería pero no la veo.
Atentamente Cristian Molina

[Alexis88]

Sería más práctico si recogieras los datos del formulario con el método serialize de jQuery. Con esto, la función insertar() ya no sería necesaria.

Código Javascript:

$("#formulario_clientes").submit(function(e){
    e.preventDefault();
    var request = $.ajax({
        url: "insertar.php",
        type: "POST",
        data: $(this).serialize()
    });
         
    request.done(function( msg ) {
        alert( msg );
    });
         
    request.fail(function( jqXHR, textStatus ) {
        alert( "Request failed: " + textStatus );
    });
});
 

Por cierto, en la línea de la data, estás colocando una coma que no es necesaria pues es el último atributo del método Ajax.

Saludos

[legomolina]

Gracias, de todas formas lo he resuelto con ajax como tal que así parece que funciona perfecto. Por cierto, me di cuenta de la coma, lo arreglé, y seguía funcionando mal. Si quieres el código me lo dices y lo pongo.

[Alexis88]

Si lo resolviste, sería bueno que lo publiques para que aquellos usuarios que tengan el mismo problema que tuviste al inicio, sepan cómo solucionarlo.

Saludos

[legomolina]

Voy

Código Javascript:

function insertar() {
        var datos="";
        var value="";
        var nombre="";
        var codigo=document.getElementById('codigo').value;
        var xmlhttp=new XMLHttpRequest();
        
        for(i=0;i<nombrecol.length;i++) {
            nombre=document.getElementById(nombrecol[i]).id;
            
            if(document.getElementById(nombrecol[i]).value=='')
                value="---";
            else 
                value=document.getElementById(nombrecol[i]).value;
            
            datos+=nombre+"="+value+"&";
        }
        
        datos+="formulario="+document.getElementById('campo_oculto').value;
    
        if(editar_reg) {
            datos+="&req=editar&codigo="+codigo;            
            editar_reg=false;
        } else {
            datos+="&req=nuevo";
            nuevo_reg=false;
        }
        xmlhttp.open("POST","registros.php",false);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(datos);
        alert(xmlhttp.responseText);
    }
 

Obviamente lo he retocado porque lo he necesitado para otras funciones pero así funciona.
El archivo registros.php:

Código PHP:

  <?php 
include("../Conexiones/conexion.php"); 
 
switch($_POST['req']) { 
    case "nuevo": 
        $sql="INSERT INTO ".$_POST['formulario']." (codigo,nombre,domicilio,cp,provincia,dni,telefono,movil,fax,email,observaciones) values('".$_POST['codigo']."','".$_POST['nombre']."','".$_POST['domicilio']."','".$_POST['cp']."','".$_POST['provincia']."','".$_POST['dni']."','".$_POST['telefono']."','".$_POST['movil']."','".$_POST['fax']."','".$_POST['email']."','".$_POST['observaciones']."')"; 
    break; 
     
    case "borrar": 
        if(isset($_POST['nombre']) && ($_POST['nombre']!='' || $_POST['nombre']!='---')) 
            $sql="DELETE FROM ".$_POST['formulario']." WHERE codigo='".$_POST['codigo']."' AND nombre='".$_POST['nombre']."'"; 
        else  
            $sql="DELETE FROM ".$_POST['formulario']." WHERE codigo='".$_POST['codigo']."' AND email='".$_POST['email']."'"; 
    break; 
    case "editar": 
        $sql="UPDATE ".$_POST['formulario']." SET nombre='".$_POST['nombre']."',domicilio='".$_POST['domicilio']."',cp='".$_POST['cp']."',provincia='".$_POST['provincia']."',dni='".$_POST['dni']."',telefono='".$_POST['telefono']."',movil='".$_POST['movil']."',fax='".$_POST['fax']."',email='".$_POST['email']."',observaciones='".$_POST['observaciones']."' WHERE codigo='".$_POST['codigo']."'"; 
    break; 
} 
 
$res=$db->query($sql); 
 
if($res) 
    echo "Accion exitosa"; 
else 
    echo mysqli_error($db); 
?>