Insert data with AJAX

What you should use is jQuery to take the form data using the serialize function.

For example:

<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'];

?>

With this script it's more facial, try it:

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;
}

Your form stays like this:

<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>

ajax (); is a function of jquery and jquery is a framework developed in javascript.

• In order for it to work you need a library, so to speak, it is jaquery.js and there are different versions.
• As it is in the front-end it helps to send information from a form to a programming language back-end like php and java.
• Unlike the traditional way you can send or all the information of your form or sections.

example:

   $.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);
                }
            });

        }

I hope you can use the information I provide you can see more details of ajax at: link