클릭 시 jquery 내의 ajax 게시물

클릭 시 jquery 내의 ajax 게시물

저는 모달 상자를 호출하여 버튼에서 게시된 값을 화면으로 페이드했다가 페이드오프하는 버튼을 가지고 있습니다. 이것은 jquery를 사용하여 정상적으로 작동합니다. 하지만 저는 또한 버튼에서 php 함수로 전송된 값을 동일한 클릭으로 게시하고 실행하고 모달 상자는 여전히 페이드인 상태로 페이드인 상태로 유지하고 싶습니다.

나는 내 사이트에 사용할 js를 알려주기 위해 이것만 가지고 있습니다.

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

아직 초보 질문이라 죄송합니다만, 그럼 아약스를 실행할 수 있을까요, 아니면 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는 reserbook입니다.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 본문의 맨 아래에 있어야 합니다. 어떤 이유에서인지 아약스가 맨 위에 있어야 하는지는 모르겠지만, 모달 박스는 작동하지 않습니다. 단지 생각일 뿐입니다.

이거 먹어봐요.최종 답변으로 편집되었습니다.

단추:

<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: 더successAjax 콜에서 의미하는 것은 아닙니다.query성공했습니다.오직 Ajax 거래가 올바르게 진행되었고 만족스러운 반응을 얻었음을 의미합니다.즉, 그것은 다음과 같이 보냈습니다.url정확한 데이터, 그러나 항상 그렇지는 않습니다.url옳은 일을 했습니다.

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

당신은 Ajax의 폼이 좋지 않습니다. 당신은 성공 이벤트가 필요합니다.그러면 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},

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

});

사용해 보세요.

언급URL : https://stackoverflow.com/questions/20543722/ajax-post-within-jquery-onclick