在javascript函数中从MySQL中删除[关闭]答案

【问题标题】：Delete from MySQL in javascript function [closed]在javascript函数中从MySQL中删除[关闭]
【发布时间】：2013-09-17 22:19:59
【问题描述】：

我有这个从 MySQL 数据库获得的项目列表。我正在尝试创建一些功能，使用户通过单击从 MySQL 执行简单删除查询的链接删除任何项目，同时从列表中动态删除项目而不刷新页面。

对于 JS 等，我是新手。

我的标记：

<!-- the following content comes from MySQL -->
<div class="item">
    <!-- div content -->
    <a href="javascript:void(0)" onclick="someFunction()">Delete</a>
<div>

<div class="item">
    <!-- div content -->
    <a href="javascript:void(0)" onclick="someFunction()">Delete</a>
</div>

我不知道应该在somefunction() 中输入什么内容，但我希望它只删除数据库中相应 DIV 中的内容，并在不刷新页面的情况下向用户删除或隐藏它。

【问题讨论】：

你需要一个ajax请求。
您需要将其分解为一个服务器端函数和一个通过 ajax 请求调用它的客户端操作。 php/mysql 操作是一个问题，ajax 请求是另一个问题。将其缩小到其中之一很有用。

标签： javascript php jquery mysql ajax

【解决方案1】：

你需要一些东西来处理这个： A. 每个 div 项的 mysql id B. 执行删除的 ajax 调用 C. 对 div 本身的隐藏或销毁操作

A：首先，将mysql id 放入div 项中。我通常最终在最接近操作的项目上使用 data-id 或类似的东西。这最大限度地减少了 jquery 逻辑。

<!-- the following content comes from MySQL -->
<div class="item">
    <!-- div content -->
    <a class="delete-item" href="javascript:void(0)" data-id="<?php echo mysql_id; ?>">Delete</a>
<div>

B：AJAX 调用的 php 端：是一个标准的 php 文件，它接受 id 查询字符串，安全地转义它，理想地检查权限，然后从 mysql 中删除。

B：我更喜欢使用 jquery 类处理程序，以便在中心位置轻松更改行为。请注意，我在上面的代码中添加了 'class="delete-item"' 并删除了 onchange 处理程序。在本节中，我们将在 delete-item 类上编写一个简单的 jquery AJAX 删除处理程序：

C：在 ajax 成功处理程序中继续隐藏 div。

$(document).ready(function () {

  $('.delete-item').click(function (e) {
    itemid = $(this).attr('data-id');
    parentdiv = $(this).parent();

    $.ajax({
      url:      '/ajax/delete-item.php?id='+itemid,
      dataType: "json",
      error:     function(e) { alert("An error occurred deleting this item.") },
      success:   function(data) {
          parentdiv.hide();
      }

    });
});

【讨论】：

它并没有像我希望的那样工作，但是谢谢！我想我可以从这里拿走它

【解决方案2】：

您熟悉 AJAX 吗？如果您已经知道这一点，请原谅我，但万一您不知道：

Ajax 将数据发布到一个外部 php 文件，该文件处理它接收到的数据，并返回一个答案。它看起来像这样：

文件 #1：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#Sel').change(function() {
                    var opt = $(this).val();
                    var someelse = 'Hello';
                    var more_stuff = 'Goodbye';
                    $.ajax({
                        type: "POST",
                        url: "receiving_file.php",
                        data: 'selected_opt=' + opt + '&something_else=' +someelse+'&more_stuff='+more_stuff,
                        success:function(data){
                            alert('This was sent back: ' + data);
                            //Next line adds the data from PHP into the DOM
                            $('#somediv').html(data);
                        }
                    });
                });
            });
        </script>
    </head>
<body>

<div id="somediv">
    <select id = "Sel">
        <option value ="Song1">default value</option>
        <option value ="Song2">Break on through</option>
        <option value ="Song3">Time</option>
        <option value ="Song4">Money</option>
        <option value="Song5">Saucerful of Secrets</option>
    </select>
</div><!-- #somediv -->

文件#2：接收文件.php

<?php
    //This is where you get the data from the browser
    $recd = $_POST['selected_opt'];
    $uid = $_POST['someelse'];

    //This is where you do your MYSQL database changes, for example:
    //mysql_query("UPDATE `users` SET `fav_song`='$recd' WHERE `user_id` = '$uid'");

    //When done, you can echo back some new HTML, like this:

    $r  = '<h1>You chose:</h1>';
    $r .= '<p>' . $recd . '</p>';  //adds to $r

    echo $r;  //Use ECHO to send data back to the browser

以上是一个完整的、独立的、可复制粘贴的示例。只需将其复制/粘贴到两个文件中：

index.html（或 test.php，或其他），以及
receiving_file.php -- 如果要重命名此文件，还必须更改文件 1 中 AJAX 代码块中的名称。

【讨论】：