在jQuery的阿贾克斯后的onclick [英] ajax post within jquery onclick

问题描述

我有那么一个按钮，它调用一个模式对话框消失在屏幕上说，贴在按钮的值褪色了，这工作正常使用jQuery，但我也希望在同一个点击的价值从按钮发送到被张贴到一个PHP函数，即运行和模态对话框仍然淡入和淡出。

I have a button which calls a modal box to fade into the screen saying a value posted from the button then fade off, this works fine using jquery, but I also want on the same click for value sent from the button to be posted to a php function, that to run and the modal box to still fade in and out.

我只有这让我的网站知道JS来使用：

I only have this to let my site know what js to use:

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

我还是新太对不起一个菜鸟的问题，但将允许AJAX运行，还是只为jQuery的？

I'm still new so sorry for a rookie question, but will that allow ajax to run, or is it only for jquery?

目前剧本我想的是：（编辑以正确形成，基于答复，但现在什么也没有发生的话）

The current script I'm trying is: (Edited to be correctly formed, based on replies, but now nothing happens at all)

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

虽然这一模式对话框甚至不发生。

Though with this the modal box doesn't even happen.

PHP的是，resersebook.php：

The php is, 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>

我是新来的这一点，我已经看了几十个就在这里等类似的问题，这是我得到了我当前的脚本，但它只是不工作。

I'm new to this and I've looked at dozens of other similar questions on here, which is how I got my current script, but it just doesn't work.

不知道它的问题，但只用模式对话框的作品必须是在HTML体底部上班，不知道是否因为某些原因AJAX需要在顶部，但随后的模态脚本盒子是行不通的，只是一个想法。

Not sure if it matters, but the script with just the modal box that works has to be at the bottom of the html body to work, not sure if for some reason ajax needs to be at the top, but then the modal box wouldn't work, just a thought.

推荐答案

试试这个。编辑到最后的答案。

Try this. Edited to the final answer.

按钮

<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 是最小到code，但强烈建议

PS#1: The change to mysqli is minimal to your code, but strongly recommended.

PS＃2 ：在成功在Ajax调用并不意味着查询成功。仅仅意味着阿贾克斯交易都是正确的，并得到了satisfatory响应。这意味着，它发送到网​​址正确的数据，但并不总是网​​址做了正确的事情。

PS#2: The success on Ajax call doesn't mean the query was successful. Only means that the Ajax transaction went correctly and got a satisfatory response. That means, it sent to the url the correct data, but not always the url did the correct thing.

这篇关于在jQuery的阿贾克斯后的onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！