同一頁面中的多個按鈕提交到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

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如何調用這個函數update_completed_todos()。
我應該在Ajax中寫什麼來通過id？
以及我如何讓每個按鈕定位到這個Ajax？
由於Ajax可能不會通過id而不是值，我應該怎麼做才能將任何值傳遞給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; 
} 

當然，你必須改變數據類型，同時鏈接到您的數據。

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 
}