Tengo un problema con la llamadas ajax en JQuery

Question

Estoy realizando una aplicación con php y JQuery y utilizo y utilizo el JQuery para hacer peticiones ajax para cargar algunas partes del la página y se me presenta un problema cuando voy a registrar un nuevo libro mediante el panel que creé para eso, cuando registro un libro por primera vez lo hace normal pero cuando lo vuelvo a hacer lo registra 2 veces y si lo vuelvo a hacer lo realiza mas de dos veces y así sucesivamente...

Este es el código del panel de registro:

<?php
require_once "comprobar_in.php";
require_once "conexion.php";
?>

<header>
<h3 id="tocar">Registrar libro <span id="salir_rl">X</span></h3>
</header>

<form id="frm_reg_lib">

<div class="campo-formulario">
<label for="nombre">Nombre:</label>
<input type="text" maxlength="50" name="nombre" id="nombre" required />
</div>

<div class="campo-formulario">
<label for="autor">Autor:</label>
<input type="text" maxlength="50" name="autor" id="autor" required />
</div>

<div class="campo-formulario">
<label for="estado">Estado:</label>

<div id="c_estado">

  <label for="radio" class="estado">Disponible</label>
  <input type="radio" maxlength="50" name="estado" id="estado" class="estado" required value="Disponible"  checked />

  <br />

  <label for="radio" class="estado">No disponible</label>
  <input type="radio" maxlength="50" name="estado" id="estado" class="estado" value="No disponible" required />
  </div>
  </div>

  <div class="campo-formulario">
  <label for="codigo">Código:</label>
  <input type="text" maxlength="50" name="codigo" id="codigo" required />
  </div>

<div class="campo-formulario">
   <label for="tipo">Tipo:</label>
   <input type="text" maxlength="50" name="tipo" id="tipo" required />
</div>

<div class="campo-formulario">
  <label for="editorial">Editorial:</label>
  <input type="text" maxlength="50" name="editorial" id="editorial" required />
</div>

<div class="campo-formulario">
  <button type="button" class="boton" id="btn_registrar_libro">Registrar</button>
</div>
</form>
<?php 
 require_once "agregar_script.php";
 ?>

contenido de registrar_libro.php:

<?php 
require_once "conexion.php";

$nombre    = $_POST['nombre'];
$autor     = $_POST['autor'];
$estado    = $_POST['estado'];
$codigo    = $_POST['codigo'];
$tipo      = $_POST['tipo'];
$editorial = $_POST['editorial'];

// $nombre    = 'qwe';
// $autor     = 'qwe';
// $estado    = 'Disponible';
// $codigo    = 'qwe';
// $tipo      = 'qwe';
// $editorial = 'qwe';

if($_SERVER['REQUEST_METHOD'] == 'POST'){
$consulta = $conexion->query("INSERT INTO libros (nombre, autor, estado, codigo, tipo, editorial) VALUES ('$nombre', '$autor', '$estado', '$codigo', '$tipo', '$editorial')");
if ($consulta) {
echo "exitoso";
}else{
 echo "error";
}
}
?>

y este el código JQuery que utilizo para cargar las páginas con ajax:

/**
* Registrar nuevo libro
*/

$("#btn_registrar_libro").on("click", function(){
$formulario = $("#frm_reg_lib").serialize();
$.post("registrar_libro.php", $formulario, function(result){
  alert("El libro se agregó correctamente");
if (result == "exitoso") {
  $("#nombre").val("");
  $("#autor").val("");
  $("#codigo").val("");
  $("#tipo").val("");
  $("#editorial").val("");
  $("#tabla").load("tabla.php");
}else if (result == "error") {
  alert("Hubo un problema al registrar el libro");
}
});
});

/**
* Barra de navegación
*/


$("#home").on("click", function(e){
e.preventDefault();
$("#home").removeClass("boton_nav");
$("#home").addClass("activa");
$("#libros, #registros").removeClass("activa");
$("#libros, #registros").addClass("boton_nav");
});

$("#libros").on("click",function(e){
e.preventDefault();
$("#libros").removeClass("boton_nav");
$("#libros").addClass("activa");
$("#home, #registros").removeClass("activa");
$("#home, #registros").addClass("boton_nav");
$("#contenido").load("libros.php");
});

$("#registros").on("click",function(e){
e.preventDefault();
$("#registros").removeClass("boton_nav");
$("#registros").addClass("activa");
$("#home, #libros").removeClass("activa");
$("#home, #libros").addClass("boton_nav");
$("#contenido").load("registros.php");
});

/**
* Mostrar panel para registrar libro
*/

$("#registrarL").on("click", function(e){
e.preventDefault();
$("#registrarL").hide("1000");
$("#reg_libro").show("1000");
});

/**
* Ocultar panel para registrar
*/

$("#salir_rl").on("click", function(){
$("#reg_libro").hide("1000");
$("#registrarL").show("1000");
});

Answer 1

Actualmente a simple vista no se pueden observar errores de lógica o de código incorrecto si muestra comportamiento equivocado no es por el código expuesto , El único detalle grave es que tu código es propenso a recibir ataques de inyección SQL , que es la consecuencia más cercana de concatenar valores directamente a la consulta ejecutada.

Propongo preparar la query para darle más seguridad, con mysqli_prepare , estos detalles se tomaron en cuenta y se explican más a detalle en la siguiente pregunta ¿Cómo evitar la inyección SQL en PHP?

require_once "conexion.php";

if($_SERVER['REQUEST_METHOD'] === 'POST'){
    $nombre    = $_POST['nombre'];
    $autor     = $_POST['autor'];
    $estado    = $_POST['estado'];
    $codigo    = $_POST['codigo'];
    $tipo      = $_POST['tipo'];
    $editorial = $_POST['editorial'];
    //Preparamos la consulta , para luego bindear los valores recibidos por POST
    if ($sentencia = $conexion->prepare("
            INSERT INTO libros (nombre, autor, estado, codigo, tipo, editorial) 
            VALUES (?, ?, ?, ?, ?, ?)")) 
    {
        /* bindear los  parámetros para marcadores, asumo que todos son Strings */
        $sentencia->bind_param("ssssss", $nombre, $autor,$estado,$codigo,$tipo,$editorial);
        /* ejecutar la consulta */
        if($sentencia->execute()) {
            echo "exitoso";
        }else{
            echo "error";
        }
        $sentencia->close();
    }
    $conexion->close();
}

Además del lado de JQuery puede resetear el form directamente y evitar limpiar cada campo

$("#btn_registrar_libro").on("click", function(){
    $formulario = $("#frm_reg_lib").serialize();
    $.post("registrar_libro.php", $formulario, function(result){
        alert("El libro se agregó correctamente");
        if (result == "exitoso") {
            $("#frm_reg_lib")[0].reset(); //Limpiar el form
            $("#tabla").load("tabla.php");
        }else if (result == "error") {
            alert("Hubo un problema al registrar el libro");
        }
    });
});