Question

我有2个textbox，firstName和lastName。问题是，当我单击另一个textbox弹出窗口lastName时，当我单击alert message时，OK一次又一次地显示。我需要刷新浏览器以删除alert message。我想使用alert message更新我的信息。当我单击button时，将显示update button，当我单击确定时，我的表将被更新，alert message将消失。有人可以帮我解决我的问题吗？

alert message

Answer 1

请考虑以下代码。

function editData(i, t, c) {
  if (i === undefined || t === undefined || c === undefined) {
    return false;
  }
  $.ajax({
    url: "edit.php",
    method: "POST",
    data: {
      id: i,
      text: t,
      column_name: c
    },
    dataType: "text",
    success: function(d) {
      console.log("Success:", d);
    },
    error: function(xhr, txt, err) {
      console.log("AJAX Error: ", xhr, txt, err);
    }
  });
}

function updateData(i) {
  if (i === undefined) {
    return false;
  }
  var $items = $("tr[data-row-id='" + i + "'] input");
  var myData = {
    id: i
  };
  $item.each(function(ind, el) {
    myData[$(el).attr("class")] = $(el).val();
  });
  $.ajax({
    url: "update.php",
    method: "POST",
    data: myData,
    dataType: "text",
    success: function(d) {
      console.log("Success:", d);
      fetch_data();
    },
    error: function(xhr, txt, err) {
      console.log("AJAX Error: ", xhr, txt, err);
    }
  });
}

$(function() {
  var $dt = $("#data-table");

  $dt.on('blur', 'input', function(e) {
    editData($(this).parent().parent().data("row-id"), $(this).val(), $(this).attr("class"));
  });

  $dt.on('click', '.btn_update', function(e) {
    e.preventDefault();
    if (confirm("Are you sure you want to update this?")) {
      updateData($(this).parent().parent().data("row-id"));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="data-table">
  <thead>
    <tr>
      <th>First Name</th>
      <th colspan="2">Last Name</th>
    </tr>
  </thead>
  <tr data-row-id="1001">
    <td><input type="text" class="firstName" value="Homer" /></td>
    <td><input type="text" class="lastName" value="Simpson" />
    </td>
    <td><button class="btnUpdate">Update</button></td>
</table>

这可以帮助您简化代码。目前尚不清楚您的“更新按钮”将要做什么，并且由于我不知道您的PHP脚本在做什么，因此很难预期您要完成什么。

由于您未提供MCVE，所以我无法测试代码的正常功能。但是使用控制台可以在不中断用户交互的情况下为您提供更多详细信息。警报框要求单击“按钮”以继续进行，这可以更改交互。

您不必使用<table>，父<div>也可以使用，但是将其作为与ID关联的数据的容器可以有所帮助。我将id分配给每一行，以使其更容易解决。我假设您的数据库表包含这样的数据：

+---------------------------+
| ID | firstName | lastName |
+---------------------------+
|  1 | Homer     | Simpson  |
|  2 | Marge     | Simpson  |
| 99 | Moe       | Szyslak  |
+---------------------------+

因此，如果可能的话，在每个<input>中保留ID是没有意义的。这实际上取决于您，因为不清楚HTML的外观，如果您提供一个更完整的示例，人们可以进一步提供帮助。

我还怀疑您需要更新update.php才能处理新的数据流。

update.php

<?php
$cn = array();
foreach($_POST as $k => $v){
  if($k == 'id'){
    continue;
  }
  array_push($cn, $k);
}
include_once 'mysqli_connect.php';
$id = $mysqli->real_escape_string($_POST['id']);
$sql = "UPDATE table_name SET ";
foreach($cn as $col){
  $val = $mysqli->real_escape_string($_POST[$col]);
  $sql .= "$col = '$val',";
}
$sql = substr($sql, 0, -1) . " WHERE id = $id;";
// Execute SQL Query
?>

这将使用发送的任何数据更新该行的每一列。您还可以考虑使用JSON将数据传递给PHP。

如何使用带有AJAX jQuery的按钮更新数据库表？

1 个答案: