单击“添加”按钮时如何将传递的变量存储到数据库中？

Question

I have only recently started coding so any help would be appreciated. I am practicing an online book club and have used Google books to obtain an ISBN code for every book.

<?php 
$ISBN = $_GET['isbn'];
?>

The books appear with their information through the passed ISBN code passed from the previous page.

<script>
//script to find the book details for the ISBN passed
function findBook(postedISBN)
{ 
var findISBN = postedISBN;



//if ISBN not passed, display error
if(findISBN == null)
{
    alert("No ISBN!");
}
//else if ISBN passed correctly, find its details using the Google Books API and display them
else
{   
    //JQuery call to Google Books API passing in the ISBN
    $.get("https://www.googleapis.com/books/v1/volumes?q=isbn:" + findISBN,function(response)
    {
        for(i=0;i<response.items.length;i++)
        {
            //get values needed and store in variables - this is just a small selection of all available - you should modify this to get the details you want to display on the page
            var title=response.items[i].volumeInfo.title;  
            var subtitle=response.items[i].volumeInfo.subtitle;  
            var publishedDate=response.items[i].volumeInfo.publishedDate;  
            var description=response.items[i].volumeInfo.description;
            var averageRating=response.items[i].volumeInfo.averageRating;
            var imageLinks= response.items[i].volumeInfo.imageLinks;
            var infoLink = response.items[i].volumeInfo.infoLink

            //set values of HTML fields to the values found in API
            document.getElementById("isbn").innerHTML = findISBN;
            document.getElementById("title").innerHTML = title;
            document.getElementById("subtitle").innerHTML = subtitle;
            document.getElementById("publishedDate").innerHTML = publishedDate;
            document.getElementById("description").innerHTML = description;
            document.getElementById("averageRating").innerHTML= averageRating;
            document.getElementById("infoLink").innerHTML= infoLink;




        }
    }); 
}//else 
}//findBook

</script>

I now want to allow the user to store the book by the ISBN code into the MySQL database, when they click the 'Add to 'I want to read' button.

The database table is called bookswantstoread; bookswantstoreadID, userID, ISBN . The code for the bookdetails.php page

  <!-- call the findBook function when the page loads -->
    <script> window.onload=findBook(<?php echo $ISBN;?>); </script>


<!--HTML elements in which book values go -->

    <div style="font-family: arial" class="container">  

<p id="label1"><b>ISBN: </b></p>
<p id="isbn"></p>
<p id="label2"><b>Title: </b></p>
<p id="title"></p>
<p id="label3"><b>Subtitle: </b></p>
<p id="subtitle"></p>
<p id="label4"><b>Published Date: </b></p>
<p id="publishedDate"></p>
<p id="label5"><b>Description: </b></p>
<p id="description"></p>
<p id="label6"><b>Average Rating</b></p>
<p id="averageRating"></p>


<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="wanttoread.php">Add to 'Want to Read'</a>



</body>

</html>

My question is basically how do I store the passed varaible (ISBN), into the database table (bookswantstoread) when the user clicks the button 'Add to 'Want to Read'.

Answer 1

Please make this edit in your code. (I have added a class and updated the href)

<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger ajax-link" href="wanttoread.php?id=<?php echo $ISBN;?>">Add to 'Want to Read'</a>



</body>

</html>

Then in the wanttoread.php, write the insert query. Assuming you have jquery, add this script.

$( '.ajax-link' ).on( 'click', function( e) {
  e.preventDefault();
  $.ajax({url: $(this).href, success: function(result){
            $(this).html("Added to List!");
        }});
});