同一页面中的多个按钮提交到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 
}