ajax post in jquery onclick

php jquery html ajax

2022-08-30 23:34:45

我有一个按钮，它调用一个模态框淡入屏幕，说从按钮发布的值然后淡出，这使用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需要位于顶部，但是模态框将不起作用，只是一个想法。

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

储备簿.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上的调用并不意味着成功了。这只意味着Ajax交易正确进行并得到了满意的回应。这意味着，它发送到正确的数据，但并不总是做正确的事情。successqueryurlurl

答案 2

您的 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);
        });
    }
});