AJAX envio POST sin refresh

[BaSingSe]

Estoy practicando ajax con jquery haciendo un formulario el cual pueda insertar, editar, mostrar y eliminar sin que la pagina recargue, hasta ahroa e conseguido 3 de esos..Insertar es quien me esta dando problemas porque la pagina se me recarga y cuando no se recarga solo me el ultimo campo del formulario.

Código Javascript:

var x = $(document).ready(Ini);
 
function Ini(){
    $("#load").load("listados.php");
}
 
function Llamar(n){
    $.get("modificar.php",{id:n},function(data){
        $("#datos").html(data); 
    });
}
 
function Operaciones(n){
    var btn = $("#op_"+n).val(),
        idi = $("#id").val(),
        nomb = $("#nom").val(),
        canti = $("#cant").val();
    console.log(btn);
    $("#datos").html('<img src="loading.gif">');
    $("#load").fadeTo("slow",0.1);
    $.get("operaciones.php",{op:btn,id:idi,nom:nomb,cant:canti},Mostrar);
}
 
 
function Mostrar(data){
    $("#datos").html('');
    $("#load").fadeTo("slow",1);
    $("#load").load("listados.php");
}
 

Este es el codigo que uso para insertar y el formulario

Código HTML:

<form>
    <input type="text" name="nom" placeholder="Nombre">
    <input type="text" name="cant" placeholder="Cantidad">
    <input type="button" value="Agregar" onclick="Insertar()">
</form>
 

Código Javascript:

function Insertar(){
    var that = $("form"), 
        data = {};
 
    that.find('[name]').each(function(index,value){
        var that = $(this),
            name = that.attr('name'),
            value = that.val();
 
        data[name] = value
    });
 
    console.log($("form").serialize());
    
   $.ajax({
        url: 'class/insertar.php',
        dataType: 'text',
        type: 'post',
        contentType: 'application/x-www-form-urlencoded',
        data: data,
        success: function( data, textStatus, jQxhr ){
            $("#load").fadeTo("slow",1);
            $("#load").load("listados.php");
        },
        error: function( jqXhr, textStatus, errorThrown ){
            console.log( errorThrown );
        }
    });
}
 

En la consola me muestra "nom=XXX&cant=2" que si esta tomando los valores del formulario pero parece que solo esta enviando el ultimo valor poruqe solo me esta insertando lo que tiene "CANT".. alguna manito para resolver esto?

Codigo PHP para insertar

Código PHP:

include_once('productos.php');
$p = new Producto($_POST['nom'],$_POST['cant']);
$p->Insertar();