使用ajax更新mysql中每个输入字段的数据

Question

我有mysql数据库。在我的页面上，当我点击一个按钮时，我从数据库中检索数据。所有数据都显示在页面上。我得到一行id、一行名称和一行数字（在输入字段中）。举个例子，我得到：

51

桌子

200

52

头

320

53

玻璃

456个

因为所有值编号（第3行）都在输入字段中，所以可以更改它们。我创建了提交按钮，所以我可以提交更改的值。这是我的js代码：

$(document).ready(function () {
        $("#submit2").click(function () {
        event.preventDefault();
        $('form#list_prices_form input[type=number]').each(function () {
        default = $("#default").val();
        var value = $(this).val();
        var id = $(this).attr("name");
        console.log(id);
        console.log(value);
        });

        $.ajax({
                    type: "POST",
                    url: "save.php",
                    data: {default: default, value: value, id: id},
                    success: function (response) {
                        default = $("#default").val();
                    $.ajax({
                        type: "POST",
                        url: "retrive.php",
                        data: {default: default},
                        success: function (response) {
                            $('#list').html(response);
                        }  
                    });
                    }
                });
                return false;
        });
        });

所以在控制台中，我得到了所有必要的字段。它们为每个字段显示正确的id和值。但它在控制台中显示错误：未捕获引用错误：未定义值

和php代码：

        $default = $_POST['default'];
        $value = $_REQUEST['value'];
        $id = $_REQUEST['id'];

        $result = $conn->query("SELECT * FROM tbl_name WHERE default = '$default'";
            $query = "UPDATE tbl_name SET (value_row) VALUES(?) WHERE id='$id'";
            $statement = $conn->prepare($query);
            $statement->bind_param('i', $value);
            if ($statement->execute()) {
                echo 'Changed';
               //print 'Success! ID of last inserted record is : ' . $statement->insert_id . '<br />';
            } else {
                die('Error : (' . $conn->errno . ') ' . $conn->error);
            }
            $statement->close();

Answer 1

您的jQuery应该是这样的：

$(document).ready(function(){
    $('#submit').click(function(e) {
        e.preventDefault();
        $(".value").each(function(){
            var id = $(this).attr('id');
            var value = $(this).attr('value');
            $.ajax({
                type: 'get',
                url: "update.php",
                data: {id: id, value: value},
                success: function(){

                }
            });
        });
    });
});

Answer 2

第一个问题似乎是您的

不要设置id，也可以尝试设置name属性。

例如

echo "$x: <input class='value' id='$id' name='$ID' value='$y' />";

请注意，通过POST提交这些变量比通过GET提交要好得多。这样做意味着URI中的数据不太可能被任何中间件记录。因此，JQuery AJAX看起来像：

$.ajax(
  type: 'post',
  url: "update.php",
  data: {id: id, value: value},
  success: function(responseData) {
    console.log("Result" + responseData);
  }
});

现在，由于您发布的是JSON而不是表单编码的数据，您需要从PHP脚本中读取JSON：

$json = file_get_contents('php://input');
$obj = json_decode($json);
var_dump($obj); // show what data is in there for your debugging.

它看起来有点像：

$obj->id; // the id POST'ed
$obj->value; // the value POST'ed

通过在发布前聚合要发送的字段，减少发布请求的数量也可能是有益的。

例如。

var values = [];
$(".value").each(function () {
  var getId = $('.value').prop('id');
  var id = $(getId).val();
  var getValue = $('.value').prop('value');
  var value = $(getValue).val();
  values.push({id: id, value: value});
});

$.ajax(
  type: 'get',
  url: "update.php",
  data: values,
  success: function(responseData) {
    console.log("Result" + responseData);
  }
});

如果您这样做，那么您的PHP代码将需要如下所示：

$postData = file_get_contents('php://input');
$postJson = json_decode($postData);
$results = [];
foreach($postJson as $row) {
  // $row->id  and $row->value
  $sql = "UPDATE table SET y='{$row->value}' WHERE ID = '{$row->id}'";

  if ($conn->query($sql) === TRUE){
    $results[$row->id] = 'updated';
  } else {
    $results[$row->id] = 'error';
  }
}
$conn->close();
echo json_encode($results); // Return a list of ID => success/error

注意：以上所有都是完全未经测试的，因为你的数据库等

更重要的是，此代码没有解决任何注入漏洞。在运行任何数据库操作之前，应该转义并验证输入数据