當選擇項目更改與該選擇項目的新值時更新mySQL值

Question

我有一個數據表由ajax調用到mysql數據庫填充，如下圖所示。每個行項目都有一個選擇項目，其狀態可以是：「未開始，等待或完成」。我想要發生的情況是，在狀態被寫回到mysql數據庫的特定行的選擇項上狀態發生了變化。每一行中的每個選擇都與一個使用排ID作爲標識的唯一的名稱，所以HTML看起來像這樣：

<tr><td><select class="statusselect" name="status_1"> 
<option value="Not Started" selected>Not Started</option> 
<option value="Waiting">Waiting</option> 
<option value="Complete">Complete</option> 
</select></td></tr> 

<tr><td><select class="statusselect" name="status_2"> 
<option value="Not Started">Not Started</option> 
<option value="Waiting" selected>Waiting</option> 
<option value="Complete">Complete</option> 
</select></td></tr> 
etc. etc. etc. 

我知道我必須使用jQuery使數據庫呼叫時選擇的變化，所以我調用看起來是這樣的：（我是新來的編碼，所以請善待我的例子不能工作！）

$('.statusselect').change(function(e) { 
var postData = $(this).val(); 
var formURL = "updatetaskstatus.php"; 
$.ajax(
{ 
    url : formURL, 
    type: "POST", 
    data : postData, 
    success:function(data, textStatus, jqXHR) 
    { 
$('div#taskdisplay').hide(); 
$('div#updateddisplay').load('taskdisplay.php').fadeIn(3000); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) 
    { 
     //if fails  
    } 
}); 
    e.preventDefault(); //STOP default action 
});  

，然後在此updatetaskstatus.php文件看起來像這樣（我知道也」不是個t right）：

require_once 'connectionsettings.php'; // Gets connection settings 

$sql = "UPDATE DesignProjects 
    SET status='$_POST['status']' 
    WHERE id='$_POST['id']'"; 

if ($mysqli->query($sql) === TRUE) { 
echo "status updated successfully"; 
} else { 
echo "Error updating status" . $mysqli->error; 
} 
$mysqli->close(); 

對不起，我知道我可能會做一些基本的事情錯誤，所以你的幫助是堆讚賞！

Answer 1

有幾件事情失蹤。在你的sql查詢中你引用了$ _POST ['status']和$ _POST ['id']，但這兩個值都不包含在ajax請求中。

您可以將ID添加到選擇的，例如data-id="1"

<tr><td><select class="status select" data-id="1" name="status_1"> 
<option value="Not Started" selected>Not Started</option> 
<option value="Waiting">Waiting</option> 
<option value="Complete">Complete</option> 
</select></td></tr> 

然後在你的AJAX你需要得到的ID值，並在請求中包含一個數據屬性。

$('.statusselect').change(function(e) { 
var status = $(this).val(); 
var id = $(this).attr("data-id"); 
var formURL = "updatetaskstatus.php"; 
$.ajax(
{ 
    url : formURL, 
    type: "POST", 
    data : {status: status, id: id}, 
    success:function(data, textStatus, jqXHR) 
    { 
$('div#taskdisplay').hide(); 
$('div#updateddisplay').load('taskdisplay.php').fadeIn(3000); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) 
    { 
     //if fails  
    } 
}); 
    e.preventDefault(); //STOP default action 
}); 

後端您需要轉義您的數據以防止mysql注入或使用mysql prepare。

您可能還想將結果包含爲json並驗證結果前端。如：

echo json_encode(array('result' => 1, 'html' => 'status updated successfully'),true); 

而且在你的Ajax

success:function(data, textStatus, jqXHR) 
{ 
    if (data.result === 1) { 
     // success message 
    } else { 
     // error message 
    } 
}