将执行 PHP 的按钮转换为 jQuery/Ajax

Question

I'm trying to write a feature for my Fantasy Football league that allows players to trade with each other. Functionally it all works fine, but as I've coded it all in PHP I have an annoying problem where any time a button is pressed the page is effectively refreshed twice. I've read that I can get around this with jQuery and Ajax but sadly I don't really have any experience with either.

Here's a small section of the code that allows logged in users to withdraw a trade offer they have made:

echo "<input type='submit' id='btn-danger' name='withdraw".$trade_id."' value='Withdraw'>";
    if($_POST && isset($_POST['withdraw'.$trade_id])) {
    $withdraw = $link->prepare("DELETE FROM trade_id_offers_out WHERE trade_id_offer_id = ".$trade_id);
    $withdraw->execute();
    }

This creates a "Withdraw" button for each trade offer they have sent out and has a unique name of "withdraw" plus whatever number the offer is in the SQL table.

As I say functionally it works perfectly fine. But it refreshes the page twice and I'm wondering how I can take this code and turn it into something a little more practical?

Many thanks for your time.

Answer 1

First you should make sure you have included jQuery into your page html before any other jQuery (there are plenty of tutorials out there).

Second you need to give the submit button a class so you can select it using a jQuery selector. Change the php code of the button to this:

echo "<input type='submit' id='btn-danger' class='withdrawTradeBtn' name='withdraw".$trade_id."' value='Withdraw'>";

Finally you would make a ajax post request to your url (same url as your page in this case). The js would look something like this and would need to be placed before the end of the html body tag or after all your buttons are rendered:

(Note: I have not tested this but it should be pretty close to what you are after)

<script>
    //we need to wait for the page to be loaded in the users browser
    $(document).ready(function(){
        //we are selecting all the buttons with the class withdrawTradeBtn
        //we are binding to the click event so whenever any of the buttons are pressed the code will be ran.
        $('.withdrawTradeBtn').on('click', function(e){
            //we need to prevent the button from actually reloading the page
            e.preventDefault();
            //now we need to make a ajax post request to the url
            $.post(
                '/your/url', //the url to make the post
                {$(this).attr('name'):'Withdraw'}, //the submitted data 
                function(data, status, jqXHR) {// success callback
                    //here is were you would delete the button or whatever
                }
            );
        });
    });
</script>

Most likely you would want to delete the trade entry from the html. You would do that in the success callback of the ajax post. I cant really add anything here because I don't know what your html structure looks like.

Hope this helps, let me know if you need any more help!