选择项目随选择项目新值更改时更新mySQL值

Question

我有一个数据表，该数据表由对mysql数据库的ajax调用填充，如下图所示。每个行项目都有一个选择项目，其状态可以是：＆＃39;未开始，等待或完成＆＃39;。我想要发生的是当在select项上更改状态时，状态被写回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. 

我知道当select更改时我必须使用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中这个文件看起来像这样（我知道也不是这样）：

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 [＆＃39; status＆＃39;]和$ _POST [＆＃39; id＆＃39;]但这两个值都不包含在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
    }
}