Question

我有一个网页，允许授权用户更新或删除MySQL表中的行。该表包含列id（INT），label（VARCHAR），details（VARCHAR），templateId（INT）和auditable（TINYINT， 0或1）。此表在前端显示为HTML，其中包含＆＃34;标签＆＃34;，＆＃34;详细信息＆＃34;，＆＃34;可审核？＆＃34;和＆＃34;编辑/删除＆＃34;列显示。

点击＆＃34;编辑＆＃34;行上的按钮，更改生成的Bootstrap模式窗体中的一些数据，然后单击＆＃34; Save Changes＆＃34;工作良好。单击＆＃34;编辑＆＃34;，单击＆＃34;取消＆＃34;在窗体上，然后单击另一行（例如，我不小心点击了错误的行）。当我单击按钮在新单击的行上执行编辑时，该行和最初单击的行都将受到影响。 Chrome控制台显示通过$.post()发送了两个JavaScript对象，但我无法从我编写的逻辑中找出原因（见下文）。我查看了MySQL并且存在重复的结果，确认页面准确反映了更新。 jQuery中有一些$.get或$.post缓存行为我不知道吗？（删除功能也会出现这种情况，但为了简洁起见，我限制了这个问题）。

主页（GUI）：

// The 'edit this row' button that brings up the modal form
$(".edit-action").click(function() {

  // Clear any previously set values in form
  $("#editActionLabel").val('');
  $("#editActionDetails").val('');
  $(".radio-edit-action").prop("checked", false);

  // All edit button id's in GUI table will be "edit-action-[`id` in database]" 
  // Grab number out of there and convert from string to number
  var actionId = $(this).attr("id");
  actionId = parseInt(actionId.slice(12));

  // Grab data from database to populate fields
  $.get("data.php?a=actionData&actionId=" + actionId, function(d) {

    // Returning a JSON encoded array isn't working, 
    // so I'm sending back a comma-separated string instead 
    var response = d.split(",");
    var label = response[0];
    var details = response[1];
    var auditable = parseInt(response[2]);

    $("#editActionLabel").val(label);
    $("#editActionDetails").val(details);

    if (auditable == 1) {
      $("#editAuditableNo").prop("checked", false);
      $("#editAuditableYes").prop("checked", true);
    } else if (auditable == 0) {
      $("#editAuditableYes").prop("checked", false);
      $("#editAuditableNo").prop("checked", true);
    }

    // Only reset `auditable` variable if selection was changed
    $(".radio-edit-action").change(function() {
      auditable = $(this).val();
      auditable = parseInt(auditable);
    });

    // User clicks "Save Changes" instead of "Cancel"
    $("#executeEdit").click(function() {

      var label = $("#editActionLabel").val();
      var details = $("#editActionDetails").val();

      var obj = {
        "operation": "edit",
        "actionId": actionId,
        "label": label,
        "details": details,
        "auditable": auditable
      };

      console.log("The object passed to 'edit' this row:");
      console.log(obj);

      $.post("data.php", obj, function(r) {
        // Confirm success or failure to user
        $("#crudResult").html(r);
      });
    }); // end click

  });

}); // end 'edit action'

data.php（通过AJAX调用以在数据库中执行UPDATE。仅显示相关代码）：

$debug = false;

$operation      =   $_POST['operation'];
$action_id      =   (isset($_POST['actionId'])      ?   $_POST['actionId']    : '');         
$label          =   (isset($_POST['label'])         ?   $_POST['label']       : 'NULL');
$details        =   (isset($_POST['details'])       ?   $_POST['details']     : 'NULL');
$auditable      =   (isset($_POST['auditable'])     ?   $_POST['auditable']   : 'NULL');  

switch ($operation) {

    case 'edit':

        $query = "
            UPDATE actions 
            SET label='$label', 
                details='$details', 
                auditable=$auditable
            WHERE id=$action_id 
            LIMIT 1";

        // DB connection not shown. Yes, I know I should be using PDO...
        $result = mysqli_query($db_conn, $query);

        // PHP echoes out the result; let the calling JavaScript figure out where to place it
        if ($result) {
            echo '<p class="text-success">Action successfully updated!</p>';
        } else {
            echo '<p class="text-warning">There was an error and the action could not be edited.</p>';
            // Don't show error to user in production, when $debug should be false
            if ($debug) {
                echo '<p><b>Error:</b> ' . mysqli_error($db_conn) . '</p>';
            }
        }

        break;

    /* case 'delete': ... */

}

模式形式，跟随Bootstrap的模板HTML，只是一个字段和几个按钮的集合（没有<form>缠绕它）。如果我能澄清任何事情，请告诉我。

Answer 1

对服务器的请求发生了多少次？我打赌它是两次。问题出在客户端。对于您创建的每个编辑点击，都会创建一个新的保存点击功能。您不需要为每次编辑点击添加此内容，而是从编辑点击功能中取出。

希望它有所帮助。

jQuery $ .post在上次意外点击后影响表中的多行

1 个答案: