Primero que nada debes tener un form o desde donde enviaras tus datos:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Insert con Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function () {
$('#grabar').click(function () {
//obtengo valores introducidos
var nombre = $('#nombre').val();
var email = $('#email').val();
var clave = $('#clave').val();
var genero = $('#genero').val();
//envio por ajax
$.ajax({
url: "insertar.php",
type: "post",
data: { nombre: nombre, email: email, clave: clave, genero: genero},
success: function (data) {
alert("Datos GRabados !!");
console.log(data);
}
});
});
});
</script>
</head>
<body>
<div class="container">
<form class="form-horizontal" >
<div class="form-group">
<label class="col-sm-2 control-label">Nombre</label>
<div class="col-sm-10">
<input class="form-control" name="nombre" id="nombre" type="text" placeholder="nombre">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input class="form-control" name="email" id="email" type="text" placeholder="correo">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Clave</label>
<div class="col-sm-10">
<input class="form-control" name="clave" id="clave" type="text" placeholder="clave">
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-2 control-label">Genero:</label>
<div class="col-sm-10">
<select id="genero" class="form-control">
<option value="1">Masculino</option>
<option value="2">Femenino</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="grabar">Grabar Datos</button>
</div>
</div>
</form>
</div>
</body>
</html>
donde recibo los datos enviados x ajax(insertar.php):
<?php
//Crear conexion
$connection = mysqli_connect('localhost', 'root', 'root', 'miBase');
if($_POST['nombre']){
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$clave= $_POST['clave'];
$genero = $_POST['genero'];
$q = "INSERT INTO usuario (nombre, email, clave, genero) VALUES ('$nombre', '$email', '$clave', '$genero')";
$query = mysqli_query($connection, $q);
if($query){
echo json_encode("ok_insert");
}
else {
echo json_encode('no_ok');
}
}
?>
como veras en este archivo recibo los parametros enviados por ajax a travez del metodo POST y los inserto desde mi php(insert.php), y mediante el metodo success retorno un mensaje de exito... uso bootstrap en este caso...espero te sirva de guia..!!