it-swarm.com.de

ajax Post innerhalb Jquery Onclick

Ich habe eine Schaltfläche, die eine modale Box aufruft, die in den Bildschirm einblendet. Dabei wird ein von der Schaltfläche geposteter Wert eingeblendet. Anschließend wird die Anzeige ausgeblendet. Dies funktioniert problemlos mit Jquery, aber ich möchte auch, dass derselbe Klick für den von der Schaltfläche gesendeten Wert an eine gepostet wird PHP-Funktion, die ausgeführt und die Modal-Box noch ein- und ausgeblendet. 

Ich habe nur das, um meine Site wissen zu lassen, welche Js verwendet werden sollen:

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

Ich bin immer noch neu, also entschuldige mich für eine Anfängerfrage, aber wird Ajax laufen, oder ist es nur für Jquery?

Das aktuelle Skript, das ich versuche, ist: (Bearbeitet, um auf der Grundlage der Antworten korrekt erstellt zu werden, aber jetzt passiert überhaupt nichts)

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

Obwohl damit die modale Box nicht passiert.

Das PHP ist 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);
    }

?>

und um gründlich zu sein, ist der Button:

<div class= "obutton feature2" data-id="<?php echo $bookID;?>"><button>Reserve Book</button></div>

Ich bin neu in diesem Bereich und ich habe mir Dutzende anderer ähnlicher Fragen angeschaut. So habe ich mein aktuelles Skript bekommen, aber es funktioniert einfach nicht.

Nicht sicher, ob es wichtig ist, aber das Skript mit nur der modalen Box, das funktioniert, muss sich am unteren Rand des HTML-Körpers befinden, um zu funktionieren, und nicht sicher, ob ajax aus irgendeinem Grund oben sein muss, aber dann würde die modale Box nicht ' Arbeit, nur ein Gedanke.

13
Vereonix

Versuche dies. Auf die endgültige Antwort bearbeitet.

Taste :

<div class= "obutton feature2" data-id="<?php echo $bookID;?>">
    <button class="reserve-button">Reserve Book</button>
</div>

Skript :

<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 : Die Änderung in mysqli ist minimal im Code, wird jedoch dringend empfohlen.

PS # 2 : Die success beim Ajax-Aufruf bedeutet nicht, dass die query erfolgreich war. Das bedeutet nur, dass die Ajax-Transaktion korrekt verlaufen ist und eine befriedigende Antwort erhalten hat. Das heißt, es wurden die korrekten Daten an die url gesendet, aber nicht immer die url hat das richtige getan.

11
Minoru

Du Ajax ist schlecht ausgebildet, du brauchst den Erfolg. Wenn Sie den Ajax aufrufen und sein Erfolg zeigt, wird die Antwort angezeigt.

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

Bearbeiten:

Ein weiterer wichtiger Punkt ist data: "book_id="+book_id, der data: {"book_id":book_id} sein sollte,

1
Wilfredo P

Sie haben einen Fehler in Ihren Ajax-Definitionen. Es sollte sein:

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

});

Versuche dies

0
Abhisek