Javascript 使用Ajax在单击按钮时删除表行_Javascript_Php_Html_Ajax_Sql Delete

Javascript 使用Ajax在单击按钮时删除表行

javascript php html ajax

Javascript 使用Ajax在单击按钮时删除表行,javascript,php,html,ajax,sql-delete,Javascript,Php,Html,Ajax,Sql Delete,我有一个HTML表，它有4列：SKU组、组ID、编辑按钮和删除按钮。我现在正在使用delete函数，希望它能够在我按下delete按钮时弹出一个确认框，如果按下“OK”，它将删除该行并发送一个delete查询，从数据库中删除该行 if (confirm('Are you sure you want to delete this entry?')) { // shorter call for doing simple POST request $.post('delete.php'

我有一个HTML表，它有4列：SKU组、组ID、编辑按钮和删除按钮。我现在正在使用delete函数，希望它能够在我按下delete按钮时弹出一个确认框，如果按下“OK”，它将删除该行并发送一个delete查询，从数据库中删除该行

if (confirm('Are you sure you want to delete this entry?')) {
    // shorter call for doing simple POST request
    $.post('delete.php', data, function (response) {
        // do something with response
    }, 'json');
    // ^ to indicate that the response will be of JSON format
}

我知道我将使用Ajax和一个单独的PHP脚本进行删除查询，但似乎无法理解。感谢您的帮助

删除按钮的HTML：

<td><input type="button" class="delete" name="delete" value="Delete" onclick="deleteRow(this)"></td>

delete.php：

<?php

  $SKU_Group = $_POST['SKU Group'];
  $Group_ID = $_POST['Group_ID'];

  $host="xxxxxx"; 
  $dbName="xxxxxx"; 
  $dbUser="xxxxxxxxxxxxxx"; 
  $dbPass="xxxxxxxxxxx";

  $pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass);

  $delete = "DELETE FROM SKU_Group_Dim WHERE Group_ID = '$Group_ID'";

  $stmt = $pdo->prepare($delete);
  $result = $stmt->execute();
  echo json_encode($result);
  if(!$result) {
      echo json_encode(sqlsrv_errors());
  }

?>

JavaScript
首先，我注意到您正在使用jQuery，所以为什么不尝试充分利用它的潜力呢
首先，为按钮创建onclick
事件处理程序。删除按钮
$('.delete').click(function () {
    // do something when delete button is clicked
});

<table class="skuTable">
    <tr>
        <td class="skuGroup">123</td>
        <td class="groupId">456</td>
        <td><input type="button" class="edit" name="edit" value="Edit" ... ></td>
        <td><input type="button" class="delete" value="Delete"></td>
    </tr>
    <!-- more similar records -->
</table>

只有在用户确认并从数据库中成功删除该行后，才能删除该行
if (confirm('Are you sure you want to delete this entry?')) {
    // shorter call for doing simple POST request
    $.post('delete.php', data, function (response) {
        // do something with response
    }, 'json');
    // ^ to indicate that the response will be of JSON format
}

但是应该将哪些数据
传递到$.post（）
以便我们知道要删除哪个记录？可能是我们要删除的记录的ID
HTML
由于您没有发布太多的HTML，我们假设您按照以下方式构建了表：
<table class="skuTable">
    <tr>
        <td>123</td><!-- sku group -->
        <td>456</td><!-- group id -->
        <td><input type="button" class="edit" name="edit" value="Edit" ... ></td>
        <td><input type="button" class="delete" name="delete" value="Delete" onclick="deleteRow(this)"></td>
    </tr>
    <!-- more similar records -->
</table>

JavaScript（再次）
通过使用jQuery进行遍历，可以轻松找到关联的ID。现在把所有的东西放在一起：
$('.delete').click(function () {
    var button = $(this), 
        tr = button.closest('tr');
    // find the ID stored in the .groupId cell
    var id = tr.find('td.groupId').text();
    console.log('clicked button with id', id);

    // your PHP script expects GROUP_ID so we need to pass it one
    var data = { GROUP_ID: id };

    // ask confirmation
    if (confirm('Are you sure you want to delete this entry?')) {
        console.log('sending request');
        // delete record only once user has confirmed
        $.post('delete.php', data, function (res) {
            console.log('received response', res);
            // we want to delete the table row only we received a response back saying that it worked
            if (res.status) {
                console.log('deleting TR');
                tr.remove();
            }
        }, 'json');
    }
});

PHP
人们使用事先准备好的声明的原因之一是为了防止攻击。你尝试使用它是好的，但你没有正确地使用它（阅读周杰伦的评论）。
您希望将变量绑定到SQL中的参数。您可以通过在函数中传递一个变量数组来实现这一点
删除记录时，可以通过使用检查受影响的记录数来检查该记录是否有效
我从来没有任何理由去检查execute（）
是否有效
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

//$SKU_Group = $_POST['SKU Group'];

$Group_ID = $_POST['Group_ID'];

$host="xxxxxx"; 
$dbName="xxxxxx"; 
$dbUser="xxxxxxxxxxxxxx"; 
$dbPass="xxxxxxxxxxx";

$pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass);

$stmt = $pdo->prepare("DELETE FROM SKU_Group_Dim WHERE Group_ID = ?");
$stmt->execute(array($Group_ID));

// send back the number of records it affected
$status = $stmt->rowCount() > 0;

// send back a JSON 
echo json_encode(array('status' => $status));

// nothing else can be outputted after this
?>



当然，这还没有经过测试，所以可能会有一些bug。如果打开浏览器的控制台日志，您可以按照日志查看发生了什么。
JavaScript
首先，我注意到您正在使用jQuery，所以为什么不尝试充分利用它的潜力呢
首先，为按钮创建onclick
事件处理程序。删除按钮
$('.delete').click(function () {
    // do something when delete button is clicked
});

<table class="skuTable">
    <tr>
        <td class="skuGroup">123</td>
        <td class="groupId">456</td>
        <td><input type="button" class="edit" name="edit" value="Edit" ... ></td>
        <td><input type="button" class="delete" value="Delete"></td>
    </tr>
    <!-- more similar records -->
</table>

只有在用户确认并从数据库中成功删除该行后，才能删除该行
if (confirm('Are you sure you want to delete this entry?')) {
    // shorter call for doing simple POST request
    $.post('delete.php', data, function (response) {
        // do something with response
    }, 'json');
    // ^ to indicate that the response will be of JSON format
}

但是应该将哪些数据
传递到$.post（）
以便我们知道要删除哪个记录？可能是我们要删除的记录的ID
HTML
由于您没有发布太多的HTML，我们假设您按照以下方式构建了表：
<table class="skuTable">
    <tr>
        <td>123</td><!-- sku group -->
        <td>456</td><!-- group id -->
        <td><input type="button" class="edit" name="edit" value="Edit" ... ></td>
        <td><input type="button" class="delete" name="delete" value="Delete" onclick="deleteRow(this)"></td>
    </tr>
    <!-- more similar records -->
</table>

JavaScript（再次）
通过使用jQuery进行遍历，可以轻松找到关联的ID。现在把所有的东西放在一起：
$('.delete').click(function () {
    var button = $(this), 
        tr = button.closest('tr');
    // find the ID stored in the .groupId cell
    var id = tr.find('td.groupId').text();
    console.log('clicked button with id', id);

    // your PHP script expects GROUP_ID so we need to pass it one
    var data = { GROUP_ID: id };

    // ask confirmation
    if (confirm('Are you sure you want to delete this entry?')) {
        console.log('sending request');
        // delete record only once user has confirmed
        $.post('delete.php', data, function (res) {
            console.log('received response', res);
            // we want to delete the table row only we received a response back saying that it worked
            if (res.status) {
                console.log('deleting TR');
                tr.remove();
            }
        }, 'json');
    }
});

PHP
人们使用事先准备好的声明的原因之一是为了防止攻击。你尝试使用它是好的，但你没有正确地使用它（阅读周杰伦的评论）。
您希望将变量绑定到SQL中的参数。您可以通过在函数中传递一个变量数组来实现这一点
删除记录时，可以通过使用检查受影响的记录数来检查该记录是否有效
我从来没有任何理由去检查execute（）
是否有效
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

//$SKU_Group = $_POST['SKU Group'];

$Group_ID = $_POST['Group_ID'];

$host="xxxxxx"; 
$dbName="xxxxxx"; 
$dbUser="xxxxxxxxxxxxxx"; 
$dbPass="xxxxxxxxxxx";

$pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass);

$stmt = $pdo->prepare("DELETE FROM SKU_Group_Dim WHERE Group_ID = ?");
$stmt->execute(array($Group_ID));

// send back the number of records it affected
$status = $stmt->rowCount() > 0;

// send back a JSON 
echo json_encode(array('status' => $status));

// nothing else can be outputted after this
?>



当然，这还没有经过测试，所以可能会有一些bug。如果打开浏览器的控制台日志，您可以按照日志查看发生了什么。
说。即使是这样也不安全！这看起来你走对了方向，什么不起作用了？从外观上看，你在ajax中的数据变量没有与你的$\u POST getter对应的参数。@LoveenDyall是的，我知道这肯定是个问题，我只是不知道应该放什么不管你叫$\u POST参数，您应该对相同的参数字符串进行url_编码。so数据：“Group_ID=“+i；或者类似的说法。即使是这样也不安全！这看起来你走对了方向，什么不起作用了？从外观上看，你在ajax中的数据变量没有与你的$\u POST getter对应的参数。@LoveenDyall是的，我知道这肯定是个问题，我只是不知道应该放什么不管你叫$\u POST参数，您应该对相同的参数字符串进行url_编码。so数据：“Group_ID=“+i；或者类似的东西谢谢你的回答。我的脚本中有代码，在运行时，单击“删除”按钮时没有发生任何事情。知道为什么吗？我把JS的前两行编辑成这样，确认框现在显示出来了<代码>文档.addEventListener（'DOMContentLoaded'，函数（）{document.getElementById（“delete”）.addEventListener（'click'，函数（）{
但是，它现在告诉我，接收到的响应状态现在是错误的，正确地遵循代码。HTML按钮应该每个都有一个class
属性，而不是id
属性。这些按钮共享这个类，因为它们共享相同的onclick
事件处理程序。id只用于一个元素，而不是多个.F查看控制台日志以确保在每个断点处获得正确的值。如果响应状态为false，请查看传递给AJAX的内容。好的，我完全按照您的代码进行了操作，但是当我单击delete（删除）按钮时，什么都没有发生，因此日志中没有任何内容可查看，或者确保您拥有（1）包括jQuery（2）将jQuery代码包装在（3）中，在删除按钮（4）中添加class=“delete”
从删除按钮中删除了onclick
属性。谢谢你的回答。我的脚本中有代码，在运行时，当我单击删除按钮时，什么都没有发生。你知道为什么吗？我编辑了JS的前两行，看起来像这样，现在显示确认框…文档。addEventListener（'DOMContentLoade