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 ：Ajax调用上的success并不意味着query成功。只表示Ajax事务正确进行并得到满意的响应。这意味着，它向url发送了正确的数据，但并非总是url做了正确的事情。

Answer 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);
                });
              }
             }

编辑：

另一个要点是data: "book_id="+book_id，应该是data: {"book_id":book_id}，

Answer 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);
        });
    }
});

Answer 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);
        });
    }
});

}）;

试试这个

jquery onclick中的ajax帖子

4 个答案: