Сообщение ajax в jquery onclick

У меня есть кнопка, которая вызывает модальное поле, чтобы затухать на экране, говоря, что значение, отправленное с помощью кнопки, затем исчезает, это работает отлично, используя jquery, но я также хочу, чтобы один и тот же клик для значения, отправленного с кнопки, чтобы быть отправляется в php-функцию, чтобы запустить, и модальная коробка все еще исчезает.

У меня есть только это, чтобы мой сайт знал, что использовать js:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

Я по-прежнему новичок, так жаль вопроса о новичках, но это позволит запустить ajax или это только для jquery?

Текущий script, который я пытаюсь сделать: (Отредактировано, чтобы быть правильно сформированным, на основе ответов, но теперь ничего не происходит вообще)

<script>
$('button').click(function() 
{

    var book_id = $(this).parent().data('id'),
    result = "Book #" + book_id + " has been reserved.";

    $.ajax
    ({ 
        url: 'reservebook.php',
        data: "book_id="+book_id,
        type: 'post',
        success: function()
        {
            $('.modal-box').text(result).fadeIn(700, function() 
            {
                setTimeout(function() 
                {
                    $('.modal-box').fadeOut();
                }, 2000);
            });
        }
    });
});
</script>

Хотя с этим модальный блок даже не случается.

php, resersebook.php:

<?php

session_start();

$conn = mysql_connect('localhost', 'root', '');
        mysql_select_db('library', $conn);

    if(isset($_POST['jqbookID']))
    {
        $bookID = $_POST['jqbookID'];

        mysql_query("INSERT INTO borrowing (UserID, BookID, Returned) VALUES ('".$_SESSION['userID']."', '".$bookID."', '3')", $conn);
    }

?>

и чтобы быть тщательным, кнопка:

<div class= "obutton feature2" data-id="<?php echo $bookID;?>"><button>Reserve Book</button></div>

Я новичок в этом, и я посмотрел на десятки других подобных вопросов, вот как я получил свой текущий script, но он просто не работает.

Не уверен, если это имеет значение, но script только с модальным блоком, который работает, должен находиться в нижней части тела html для работы, не уверен, что по какой-то причине ajax должен быть наверху, но затем модальная коробка не сработает, просто мысль.

Ответ 1

Попробуйте это. Отредактировано до окончательного ответа.

кнопка

<div class= "obutton feature2" data-id="<?php echo $bookID;?>">
    <button class="reserve-button">Reserve Book</button>
</div>

script

<script>
$('.reserve-button').click(function(){

    var book_id = $(this).parent().data('id');

    $.ajax
    ({ 
        url: 'reservebook.php',
        data: {"bookID": book_id},
        type: 'post',
        success: function(result)
        {
            $('.modal-box').text(result).fadeIn(700, function() 
            {
                setTimeout(function() 
                {
                    $('.modal-box').fadeOut();
                }, 2000);
            });
        }
    });
});
</script>

reservebook.php

<?php
session_start();

$conn = mysql_connect('localhost', 'root', '');
mysql_select_db('library', $conn);

if(isset($_POST['bookID']))
{
    $bookID = $_POST['bookID'];

    $result = mysql_query("INSERT INTO borrowing (UserID, BookID, Returned) VALUES ('".$_SESSION['userID']."', '".$bookID."', '3')", $conn);

    if ($result)
        echo "Book #" + $bookId + " has been reserved.";
    else
        echo "An error message!";
}
?>

PS # 1: изменение на mysqli минимально для вашего кода, но настоятельно рекомендуется.

PS # 2: вызов success по Ajax не означает, что query был успешным. Только означает, что транзакция Ajax прошла правильно и получила удовлетворительный ответ. Это означает, что он отправил url правильные данные, но не всегда url сделал правильную вещь.

Ответ 2

Вы Ajax плохо сформированы, вам нужно событие sucsses. При этом, когда вы вызываете ajax и его успех, он покажет ответ.

$.ajax
        ({ 
            url: 'reserbook.php',
            data: {"book_id":book_id},
            type: 'post',
            success: function(data) {
                $('.modal-box').text(result).fadeIn(700, function() 
                {
                   setTimeout(function() 
                    {
                    $('.modal-box').fadeOut();
                    }, 2000);
                });
              }
             }

Edit:

Другим важным моментом является data: "book_id="+book_id, который должен быть data: {"book_id":book_id},

Ответ 3

У вас есть ошибка в определениях ajax. Это должно быть:

$.ajax
({ 
    url: 'reserbook.php',
    data: "book_id="+book_id,
    type: 'post',
    success: function()
    {
        $('.modal-box').text(result).fadeIn(700, function() 
        {
            setTimeout(function() 
            {
                $('.modal-box').fadeOut();
            }, 2000);
        });
    }
});

Ответ 4

$.ajax
({ 
    url: 'reservebook.php',
    data: {
    jqbookID : book_id,
    },
    type: 'post',
    success: function()
    {
        $('.modal-box').text(result).fadeIn(700, function() 
        {
            setTimeout(function() 
            {
                $('.modal-box').fadeOut();
            }, 2000);
        });
    }
});

});

Попробуйте это