Таблица обновления JQuery/AJAX по ссылке/кнопке

Question

У меня есть таблица, заполненная MySQL, я пытаюсь обновить значения одним нажатием кнопки, но я не уверен, с чего начать.

Я просто попадаю в JQuery/AJAX, и на самом деле не очень понял это, но не слишком сурово.

В моем примере я имею таблицу HTML, который выглядит следующим образом:

ID Status  Set Status 
1 Pending  Yes/No 
2 Pending  Yes/No 
3 Pending  Yes/No 
4 Pending  Yes/No 
5 Pending  Yes/No 

Теперь, когда я нажимаю на ID 3 Да, запись MySQL с ID 3 должен быть обновлен до Yes

Мой вопрос, как узнать, какая из Yes/No была нажата? Как передать это скрипту обработки через AJAX?

Мои Yes/No Ссылки имеют идентификатор записи прилагается, как так:

<a href="status.php?set=yes&id=3">

Я хорошо с PHP части я думаю, моя проблема заключается в получении правильных данных к нему.

// Редактировать это таблица:

<table class="table table-striped table-bordered table-hover datatable"> 
     <thead> 
     <tr> 
      <th><div class="checkbox"><input type="checkbox" /></div></th> 
      <th>ID</th> 
      <th>Status</th> 
      <th>Set Status</th> 
     </tr> 
     </thead> 
<tbody> 
<?php 
     $query=mysql_query("select * from test"); 
     if(mysql_num_rows($query)>0){ 
     while($data=mysql_fetch_array($query,1)){ 
?> 
<tr> 
    <td><div class="checkbox"><input type="checkbox" /></div></td> 
    <td><?php echo $data['id']; ?></td> 
    <td> 
    <?php 
    if($data['status'] == 'pending') 
    { 
     echo "<span class=\"label label-warning\">Pending</span>"; 
    } 
    elseif($data['status'] == 'yes') 
    { 
     echo "<span class=\"label label-success\">Yes</span>"; 
    } 
    elseif($data['status'] == 'no') 
    { 
    echo "<span class=\"label label-danger\">No</span>"; 
    } 
    ?></td> 
    <td> 
    <?php 
    if($data['status'] == 'pending') 
    { 
     echo "<a href=\"" . "status?set=yes&id=" . $data['id'] ."\" class=\"btn btn-success btn-xs\"><i class=\"icon-ok-sign\"></i> Yes</a>" . " <a href=\"" . "status?set=no&id=" . $data['id'] ."\" class=\"btn btn-danger btn-xs\"><i class=\"icon-remove\"></i>No</a>"; 
    } ?> 
    </td> 
    </tr> 
    <?php 
      } 
    } ?> 
    </tbody> 
    </table> 

/// EDIT 2

Используя ответ user574632, я получил простой AJAX GET работать, чтобы обновить таблицу, теперь я m, пытаясь получить некоторую обратную связь, отправленную обратно пользователю и скрыв 2 кнопки.

status.php

$id = $_GET['id']; 
$status = $_GET['set']; 

if($_GET['set'] == 'yes') { 
$result = mysql_query("UPDATE test SET status='yes' WHERE id='$id'") 
or die(mysql_error()); 
echo "Status Changed to Yes"; 
exit(); } 

if($_GET['set'] == 'no') { 
$result = mysql_query("UPDATE test SET status='no' WHERE id='$id'") 
or die(mysql_error()); 
echo "Status Changed to No"; 
exit(); } 

Answer 1

Хотя вы, вероятно, хотите, чтобы отобразить какой-то обратной связи для пользователя, это самый простой способ добиться этого будет выглядеть примерно так:

$('#tableid a').click(function(){ 
    event.preventDefault(); 
    var href = $(this).attr('href'); 
    $.get(href); 
}) 

при условии, что таблица HTML имеет идентификатор = «TABLEID» ,

Это означает, что нужно остановить связь, а затем захватить атрибут href и выполнить запрос на получение через ajax.

Вы, вероятно, хотите, чтобы указать успех/провал и т.д., но не видя status.php я не могу вдаваться в подробности

EDIT на комментарий: Для того, чтобы получить данные обратно из файла PHP:

$('#tableid a').click(function(){ 
    event.preventDefault(); 
    var href = $(this).attr('href'); 

    $.get(href, function(data) { 
     //append data to a div, hide buttons etc. 
     //alert used as example 
     alert(data); 
    }); 
}); 

Y

Answer 2

Добавлен класс вашего тега привязки, так он будет выглядеть <a class="mylink" href="status.php?set=yes&id=3">

Теперь добавьте JQuery, чтобы инициировать Ajax запрос при нажатии на ссылку. Вот как должен выглядеть ваш jquery.

jQuery(document).ready(function($){ 
    $(".mylink").click(function(e) { 
     $.post($(this).attr(),{},function(res){ 
      console.log(res); 
     }); 
     return false; 
    }); 
});