javascript - 同一页面中的多个按钮提交到Ajax

Question

我在同一页面中有多个按钮，例如 50 个或更多，以 Ajax wordpress 方式提交单个值。它们看起来像这样:

<input id="1-57977357564a7" class="button-primary" type="submit" value="Done"/>
<input id="2-57977357564a7" class="button-primary" type="submit" value="Done"/>
<input id="3-57977357564a9" class="button-primary" type="submit" value="Done"/>
// And so on, more buttons

每个按钮都应该更新某个数据库表中的行。 它应该使用 Ajax 调用 update_completed_todos()

add_action('wp_ajax_update_completed_todos', 'update_completed_todos');
add_action( 'wp_ajax_nopriv_update_completed_todos', 'update_completed_todos' );
function update_completed_todos() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'todos';
    $id = '';// Need to pass the id here some how
    $result = $wpdb->get_results("SELECT id FROM " . $table_name .  " WHERE id = '" .$id."'");
    if (count ($result) > 0) {
        $wpdb->update( 
            $table_name, 
            array(  
                'complete'   =>  '10', 
            ),
            array( 'id' => $id )
        );
    }
}

我需要将id传递给这个函数。
我应该在 Ajax 中编写什么来传递 id ？
我怎样才能让每个按钮都针对这个 Ajax？
由于 Ajax 可能无法传递 id 而不是值，那么我应该如何在此处将任何值传递给 Ajax？
Ajax 应该是这样的:

$.ajax({
     url: "<?php echo esc_js( admin_url( 'admin-ajax.php' ) ) ?>",
     type: "POST",// I am not sure
     data: // Something I don't know here
     //may be more here     
 });

Answer 1

尝试:

HTML:

<input id="1-57977357564a7" class="button-primary" type="submit" value="Done" onclick="ajax($(this));return false;"/>
<input id="2-57977357564a7" class="button-primary" type="submit" value="Done" onclick="ajax($(this));return false;"/>
<input id="3-57977357564a9" class="button-primary" type="submit" value="Done" onclick="ajax($(this));return false;"/>

Javascript:

function ajax($this) {
    var id = $this.attr("id");


    $.ajax({
        method: "POST",
        url: "your address",
        dataType: "your response type",
        data: {
            id: id
        },
        success: function (response) {
            console.log(response);
        }
    });
}

PHP:

if (isset($_POST["id"])) {
    var_dump($_POST["id"]);
    exit;
}

当然，您必须更改数据的 dataType 和 url。

wordpress 方式

Javascript:

function ajax($this) {//If you got error "Function ajax is not defined" declare this before document ready
    var id = $this.attr("id");

    $.ajax({
        method: "POST",
        url: "<?php echo esc_js( admin_url( 'admin-ajax.php' ) ) ?>",
        dataType: "text",
        data: {
            action: "update_completed_todos",// call the php function 
            id: id // store id
        },
        success: function (response) {
            console.log(response);
        }
    });
}

PHP:

add_action('wp_ajax_update_completed_todos', 'update_completed_todos');
add_action( 'wp_ajax_nopriv_update_completed_todos', 'update_completed_todos' );
function update_completed_todos() {

    $id = $_POST['id'];// store id from ajax
    //do something with this id
}