-2

我有这个从 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 中的内容，并在不刷新页面的情况下从用户那里删除或隐藏它。

4

2 回答 2

1

你熟悉 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

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

  1. index.html（或 test.php，或其他），以及
  2. 接收 文件.php——如果你想重命名这个文件，你还必须在文件 1 的 AJAX 代码块中更改名称。
于 2013-09-17T22:45:28.587 回答
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();
      }

    });
});
于 2013-09-17T22:55:46.380 回答