AJAX Wordpress插入

Question

I have a complete/completed button on a custom post type page.

And It works, When someone clicks the button it sends the right data to the db and adds marks it complete but I want to conver this to ajax but the button itself doesn't send any data. I send the post type and the user id to the server based on the post they are on. And I am trying to figure this out.

In single.php

<form action='' method="post" class='comp-btn'>
   <input class='workout-submit' id="workout-submit"type='submit' name='complete' value='Complete'/>
 </form>

This is the post req

//Inserts row into database
if (isset($_POST['complete'])):
$wpdb->insert('wp_completed_workouts',
    array(
      userID => $current_userID,
      postID => $current_postID,
        )
    );
    endif;

TLDR: I have this post request (that works)I would like to turn into an AJAX call. Cause I don't want it to reload every time someone hits the complete button.

Answer 1

Since you are using Wordpress, AJAX works best in sending data to functions.php.

First, in your html/js file:

$('.comp-btn').on('submit', function(){
    $.ajax({
        type: 'POST',
        url: "../../../../wp-admin/admin-ajax.php",
        data: {'action':'sendworkout','complete':$('.workout-submit').val()},
        success: function(response){
            console.log(response); // shows 'success'
            // do things here
        }
    });
});

Second, in your WP functions.php

add_action('wp_ajax_sendworkout', 'sendworkout');
add_action('wp_ajax_nopriv_sendworkout', 'sendworkout');
function sendworkout(){
    $workoutcomplete = $_POST['complete'];
    if($workoutcomplete){
        //DB insert here
    }
    wp_send_json_success('success');
}

Note that the 'action' in ajax syntax is referring to the function name in your functions.php, and the 'complete' refers to the $_POST['complete'] in your functions.php