javascript - 使用ajax在后台删除mysql数据库条目

Question

我有一个生成记录列表的查询:

<table class="simplet" width="640" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th width="300" colspan="2">Product Name</th>
<th width="150">Brand</th>
<th width="100">Quantity</th>
<th width="60">Price</th>
<th width="30">Delete</th>
</tr>
</thead>
<tbody>
<tr><td colspan="6"><div id="status_text_list" /></td></tr>

[insert_php]

$current_user= wp_get_current_user();
$username= $current_user->user_login;

mysql_connect("localhost","xxxx","xxxx");//database connection
mysql_select_db(xxx");

$query= "SELECT * FROM wp_userdata WHERE username='$username'";
$result= mysql_query($query);
if (!$result) { die("Error db request: <br />". mysql_error()); }

while ($result_row = mysql_fetch_array($result, MYSQL_ASSOC)){ echo '<tr class="odd-row"><td width="30"></td><td>'.$result_row['product_name'].'</td><td>'.$result_row['product_brand'].'</td><td>'.$result_row['product_quantity'].'</td><td>'.$result_row['product_link'].'</td><td><a class="link-delete" href="delete.php?id='.$result_row['id'].'">X</a></td></tr>';
}


[/insert_php]

</tbody></table>

这是我的 ajax jquery 部分:

$(document).ready(function(){
//on the click of the submit button 
$(".link-delete").click(function(){
 //get the form values


var current_user= wp_get_current_user();
var username= $current_user->user_login;

 //make the postdata
 var postData = 'username='+username;

 //call your input.php script in the background, when it returns it will call the success function if the request was successful or the error one if there was an issue (like a 404, 500 or any other error status)

 $.ajax({
    url : "delete.php",
    type: "POST",
    data : postData,
    success: function(data,status, xhr)
    {
        //if success then just output the text to the status div then clear the form inputs to prepare for new data
        $("#status_text_list").html(data);
    },
    error: function (jqXHR, status, errorThrown)
    {
        //if fail show error and server status
        $("#status_text_list").html('there was an error ' + errorThrown + ' with status ' + textStatus);
    }
});
}); });

这是我的delete.php:

mysql_connect("localhost","xxxx","xxxx");//database connection
mysql_select_db("xxxx");


if(isset($_REQUEST['id']) && is_numeric($_REQUEST['id']))
{
mysql_query("DELETE FROM wp_userdata WHERE id='".$_REQUEST['id']."'");
}

echo ("DATA DELETED SUCCESSFULLY");

此记录列表在每个表行的末尾都有一个删除“X”链接。当我点击删除链接时，我需要在后台完成删除过程，而无需离开页面。

现在，当我单击“删除”时，它会将我带到delete.php页面。但记录会被删除。

那么如何让 Ajax 部分工作呢？

是否也可以在不离开/刷新页面的情况下让已删除的行从屏幕上消失？

Answer 1

此代码存在多个问题。

1. 您正在混合 Javascript 和 PHP。

   var current_user= wp_get_current_user();
   var username= $current_user->user_login;
   

   您正在尝试从 PHP 调用创建 Javascript 变量。这不会工作。您可能正在寻找类似于以下内容的内容:

   <?php
   $current_user = wp_get_current_user();
   echo "var username = '" . $current_user->user_login . "'";
   ?>
   

2. 您将被重定向，因为您使用的是设置了 href 属性的 a 节点。默认情况下，行为是将浏览器带到该新页面。

   将 href 值设置为 # 并让 jQuery $.click() Hook 完成繁重的工作，正如您将其写入的那样做。

3. 您的 AJAX 函数调用 delete.php，但没有指示 ID 的 $_GET 属性。

   生成表格时，为调用 AJAX 函数的 a 标记提供一个包含要删除的 ID 的自定义 data-* 属性。

   <a class="link-delete" href="#" data-delete-id="' . $result_row['id'] . '">X</a>
   

   您可以通过修改 $.click() 函数来访问此 data-* 变量，如下所示:

   $(".link-delete").click(function(){
    var deleteid = $(this).data("delete-id");
    //big snip
    $.ajax({
       url : "delete.php?id="+deleteid,
       //big snip
     });
   });
   

4. 虽然超出了问题的范围，但此代码使用了已弃用的 PHP mysql_* 扩展。请考虑将您的数据库代码切换到 MySQLi 或 PDO。

5. 虽然也超出了问题的范围，但您似乎很容易受到 SQL 注入(inject)的攻击。这是一个主要的安全风险，可以通过使用准备好的查询轻松缓解，这些查询在建议作为 mysql_* 扩展的替代品的两个扩展中都可用。

<小时/>

更新:此时，您需要从 View 中删除该行。您可以使用 jQuery 方便的 $.closest() 指令来完成此操作。 $(".link-delete").click(function(){ //大剪断 $.ajax({ //剪断 成功:函数(数据，状态，xhr) { //如果成功则将文本输出到状态div，然后清除表单输入以准备新数据 $("#status_text_list").html(数据); $(this).closest("tr").remove();//删除成功后删除父级 }, //再次截图 }); });