add-empleado.php

<?php

// incluye el archivo de conexion a la bd
require_once 'conexion.php';


/**
* escapa los caracteres que permiten la iyeccion arbitraria de codigo sql
* para mas informacion ver la documentacion de la funcion addslashes
* http://php.net/manual/es/function.addslashes.php
*
* @param {str} $nombre   nombre del empleado
* @param {str} $apellido apellido del empleado
* @param {str} $correo   correo electronico del empleado
*
* @return {array} array con los campos escapados
*/
function scape_fields($nombre, $apellido, $correo){
    return [
        "nombre" => addslashes($nombre),
        "appellido" => addslashes($apellido),
        "correo" => addslashes($correo),
    ];
}


/**
* inserta un nuevo empleado en la base de datos
*
* @param {str} $nombre   nombre del empleado
* @param {str} $apellido apellido del empleado
* @param {str} $correo   correo electronico del empleado
*
* @return {str} texto que indica el exito o el fracaso de la operacion
*/
function insert_empleado($nombre, $apellido, $correo){

    // nos conectamos con la base de datos y recuperamos el link de dicha
    // conexion
    $conn = connect_db();

    // extramos las variables en la tabla de nombres locales
    // define las variables $nombre, $apellido, $correo dentro de esta funcion
    // para mas informacion ver la documentacion de la funcion extract
    // http://php.net/manual/es/function.extract.php
    extract(scape_fields($nombre, $apellido, $correo));

    // consulta que vamos a ejecutar
    $query = "
    INSERT INTO empleados (
        Nombres,
        Apellidos,
        Correo
    ) VALUES (
        $nombre,
        $apellido,
        $correo
    )";

    // ejecucion de la consulta
    mysql_query($query, $conn);

    // recuperamos las filas afectadas por la consulta
    $affected_rows = mysql_affected_rows($conn);

    // se evalua las filas afectadas 0 = falso 1 = verdadero y devuelve el
    // mensaje con el exito o fracaso de la operacion
    return ($affected_rows) ?
        "Empleado añadido!!":"Ocurrio un error al añadir el empleado!!";
}

echo insert_empleado(
    $_POST['nombre'],
    $_POST['apellido'],
    $_POST['correo']
);

?>

add_empleado.js

/*jslint nomen: true, debug: true, evil: true, vars: true, browser: true,
  devel: true */
/*global $ */


/**
 * modulo para añadir un nuevo empleado con ajax
 */
var AddEmpleado = function(){

    this.codigo = document.getElementById('txtCodigo').value;
    this.nombre = document.getElementById('txtNombres');
    this.apellido = document.getElementById('txtApellidos');
    this.correo = document.getElementById('txtCorreo');

    this.result = $("#result");

    this.btnGuardar = document.getElementById("txtGuardar");

    this.btnGuardar.addEventListener('click', this.send_data.bind(this), false);

};

AddEmpleado.prototype = {

    // url de la accion a la que se le enviara la solicitud
    url_action: '/add-empleado.php',

    validate: function(){
        /**
         * valida los campos del formulario y si alguno no se encuentra
         * añadido muestra una alerta y retorna la validacion como Falso, caso
         * contrario devuelve verdadero
         */

        var validations = [
            this.nombre.length === 0,
            this.apellido.length === 0,
            this.correo.length === 0
            ];

        var errors = [
            'El campo nombre esta vacio',
            'El campo apellidos esta cacio',
            'El campo correo esta vacio'
            ];

        var errorIndex = validations.indexOf(false);

        if (errorIndex > -1) {
            alert(errors[errorIndex]);
            return false;
        }

        return true;

    },

    success: function(data){
        /**
         * tras el exito de la operacion muestra un mensaje dentro de #result
         */

        this.result.html(data);
    },

    get_form_data: function(){
        /**
         * genera un objeto con los datos que se van a enviar al servidor
         */

        return {
            nombre: this.nombre.value,
            apellido: this.apellido.value,
            correo: this.correo.value
        };
    },

    send_data: function(e){
        /**
         * event handler que se encuentra a la escucha del evento click del
         * boton submit valida los datos del formulario y si estos son
         * correctos envia la solicitud ajax
         */

        // esto previene que el formulario se envie como lo hace normalmente
        // cuando se presiona el boton tipo submit
        e.preventDefault();

        if (this.validate()) {
            $.post(
                this.url_action,
                this.get_form_data(),
                this.success.bind(this)
                );
        }

    }
};

conexion.php

<?php

/**
* nos conecta con la base de  datos y nos devuelve el link de dicha conexion
* NO OLVIDES EDITAR TUS DATOS DE CONEXION
*
* @return {CONEXION_LINK} link de la conexion ala base de datos
*/
function connect_db(){
    $db_connection = [
        "host" => "localhost",
        "user" => "root",
        "pass" => "contraseña"
    ];

    $conn = mysql_connect(
        $db_connection["host"],
        $db_connection["user"],
        $db_connection["pass"]
    ) or die(mysql_error());

    mysql_select_db("empresa", $conn) or die(mysql_error());

    return $conn;
}

?>

index.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js" ></script>
<script type="text/javascript" src="add_empleado.js" ></script>
<script type="text/javascript">
/**
 * encerrar la implementacion con (functino(){...}());
 * aisla el scope de javascript: no escribis encima de la variable window, una
 * variable global
 */
(function(){
    var main = function(){
        /**
         * implementa el objeto AddEmpleado que se encuentra en el modulo
         * add_empleado.js (ver mas arriba)
         */
        var addEmpleado = new AddEmpleado();
    };

    /**
     * esto de abajo "espera" a que se cargue por completo el documento, cuando
     * esto ocurre ejecuta la funcion main
     */
    window.addEventListener('load', main, false);
}());
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>Codigo
    <input type="text" name="txtCodigo" id="txtCodigo" />
    <br />
  </p>
  <p>Nombres
    <input type="text" name="txtNombres" id="txtNombres" />
    <br />
  </p>
  <p>Apellidos
    <label for="txtApellidos"></label>
    <input type="text" name="txtApellidos" id="txtApellidos" />
  </p>
  <p>Correo
    <label for="txtCorreo">
    <input type="text" name="txtCorreo" id="txtCorreo" />
  </p>
  <p>&nbsp;</p>
  <p>
    <input type="submit" name="txtGuardar" id="txtGuardar" value="Guardar"/>
  </p>
  </form>
  <div id= "result" ></div>
</body>
</html>