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

Posted 2023-02-24

【中文标题】使用ajax为每个输入字段更新mysql中的数据

【英文标题】：Update data in mysql for every input field using ajax

【发布时间】：2016-04-01 12:59:04

【问题描述】：

我有 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 和值。但它在控制台中显示错误：Uncaught ReferenceError: value is not defined

和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();

【问题讨论】：

我可以看到您正在创建多个数字框，但是在执行 Ajax 时您只是传递了单行。这是为什么呢？

嗯...我为每个 .value 类分配了每个函数，所以我传递了每一行？

哦..对不起...我没见过.each。我建议不要传递多个ajax，而是传递一个数组。并在服务器端读取该数组并让for 循环遍历传入数组。

【参考方案1】：

第一个问题似乎是您的<input> 没有名字。因此浏览器不会提交该元素。这是根据W3 spec for successful controls。

不要设置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

通过在 POST 之前聚合要发送的字段来减少您发出的 POST 请求的数量也可能是有益的。

例如

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

注意：鉴于您的数据库等，以上所有内容都完全未经测试

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

【讨论】：

您好，感谢您的回答，但点击提交后没有任何反应。我将所有变量推送到数组中，然后在我的 update.php 中添加了您的一段 php 代码。但同样的事情......控制台没有错误，但行没有更新......

我在为 foreach() 提供的 php 参数中发现错误

【参考方案2】：

你的 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()

                
            );
        );
    );
);

【讨论】：

@KondukterCRO 我用更新的 jQuery sn-p 部分地 重新创建了这个问题，它对我来说工作正常。您现在面临的问题是什么？

仍然没有任何反应。页面不会重新加载，但值不会更新。

@KondukterCRO 首先，在浏览器中安装firebug addon 以查看您是否正确传递了值。其次，table 是一个MySQL reserved keyword，所以你必须用反引号来转义它，就像这样：$sql = "UPDATE `table` SET y='$value' WHERE ID = '$id'";。第三，请用您的表格table 更新您的问题，以便我可以准确地重新创建问题。

感谢您的努力。我更新了我的问题，所以你可以看到我得到了什么。

@KondukterCRO 我的意思是用您的表格内容更新您的问题，即您在表格table 中的任何内容，因为只有在看到表格后我才能准确地重新创建问题。