jQuery onclick中的ajax发布

Question

我有一个按钮，它调用模式框淡入屏幕，说从按钮发布的值然后淡出，使用jquery可以正常工作，但我也想在单击按钮时将按钮发送的值发布到屏幕上php函数，可以运行并且模式框仍然淡入和淡出。

我只有这个让我的网站知道要使用什么js：

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

我还是个新手，所以对一个菜鸟问题感到抱歉，但是那会允许ajax运行，还是只针对jquery？

我正在尝试的当前脚本是：（根据回复进行了编辑，使其格式正确，但是现在什么都没有发生）

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

我是新手，在这里我还研究了许多其他类似的问题，这是我如何获得当前脚本的方式，但这根本行不通。

不确定是否重要，但仅具有模式框的脚本必须位于html主体的底部才能工作，不确定由于某种原因ajax是否需要位于顶部，但是模​​式框不会工作，只是一个想法。

Answer 1

试试这个。编辑为最终答案。

按钮 ：

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

脚本 ：

<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 ：successon
Ajax调用并不意味着query成功。仅表示Ajax交易正确并获得了令人满意的响应。就是说，它发送url了正确的数据，但并不总是发送正确的数据url。