web-dev-qa-db-ja.com

jquery onclick内のajax投稿

私はモーダルボックスを呼び出して、ボタンから投稿された値が画面にフェードインし、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が上部にある必要があるかどうかはわかりませんが、モーダルボックスは仕事、考えだけ。

phpjqueryhtmlajax
14
Vereonix

これを試して。最終回答に編集されました。

ボタン：

<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が正しいことをしたわけではありません。

11
Minoru

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

編集：

もう1つの重要な点はdata: "book_id="+book_id、これはdata: {"book_id":book_id}、

1
Wilfredo P

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);
        });
    }
});
1
floriangosse
$.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);
        });
    }
});

}）;

これを試して

0
Abhisek