Question

注意＃1：var id = $("#mysqlid").val();应该是来自表单的隐藏字段中的值，其中已删除了删除按钮。

id 未知，因为它是不断变化的数据库中的auto_increment id。使其独特。

<script type="text/javascript">
$(document).ready(function(){

    $(document).on("click", "#delete", function(){

        var id = $("#mysqlid").val(); // Note #1

        $.ajax({
            type:"post",
            url:"http://www.mydomain.no/action.php",
            data:"id="+id+"&action=delete",
            success:function(data){
                showList(); 
                // showlist() returns an updated list of entries from the database after the selected row is deleted.
            }

        });
    });
});
</script> 

<table id="list">
    <theader>
        <tr>
            <td>Name</td><td>Action</td>
        </tr>
    </theader>
    <tbody>
        <!-- Content from action.php start here -->
        <tr>
            <td>Test data</td>
            <td>
                <form>
                    <input type="hidden" id="mysqlid13" value="13">
                    <a href="#" id="delete">
                        <img style="cursor:pointer;" src="gfx/delete.png" alt="Delete">
                    </a>
                </form>
            </td>
        </tr>
        <tr>
            <td>Test data 2</td>
            <td>
                <form>
                    <input type="hidden" id="mysqlid14" value="14">
                    <a href="#" id="delete">
                        <img style="cursor:pointer;" src="gfx/delete.png" alt="Delete">
                    </a>
                </form>
            </td>
        </tr>
        <!-- Content from action.php ends here -->
    </tbody>
</table>

我删除了所有多余的代码，以免弄乱手头的问题。

我确信这对于比javascript更高级的人来说是一个简单的解决方法。

Answer 1

根据我之前的建议，您可以为需要抓取并传递回服务器的元素分配一个公共类名。类名不必是唯一的，只是已知。如果您为同一个类名提供了您希望执行此操作的所有元素，则可以选择这些元素，获取它们的值，并在ajax调用中将它们传回。鉴于html：

<form>
   <input type="hidden" id="mysqlid13" class='deleteMe' value="13">
   <a href="#" id="delete">
        <img style="cursor:pointer;" src="gfx/delete.png" alt="Delete">
   </a>
</form>

你的js可能会成为：

$(document).on("click", "#delete", function(){
    var id = $(this).closest("form").find(".deleteMe").val();
    /*make your ajax call or whatever*/
});

现在，如果每个表单元素只有一个隐藏的输入元素，您甚至可以简化它，甚至不使用标识符并按类型选择：

 $(document).on("click", "#delete", function(){
     var id = $(this).closest("form").find("input[type='hidden']").val();
    /*make your ajax call or whatever*/
});

Answer 2

设置数据格式，它可能不会像查询字符串那样传递，完整的URL可能无法正常工作CORS

   $.ajax({
      type:"post",
      url:"/action.php",
      data:{"id":id,"action":"delete"},
      success:function(data){
      showList(); 
      }

Answer 3

首先，您需要更改链接以使用类而不是ID，因为ids 必须是唯一的。所以你的HTML变成了

<a href="#" class="delete">...

然后你的js变成了

$(document).on("click", ".delete", function(){
    var id = $(this).prev("input").val();
    ...
}

Answer 4

我更喜欢以更好的方式做到这一点，比如

注意它无效的HTML在文档中有重复的ID，请将其更改为类

<form>
    <input type="hidden" name="id" value="14" />
    <input type="hidden" name="action" value="delete" /> 
    <a href="#" class="delete">
        <img style="cursor:pointer;" src="gfx/delete.png" alt="Delete" />
    </a>
</form>


$(document).on("click", ".delete", function (e) {
    e.preventDefault(); // prevent default action
    var that = this;
    $.ajax({
        type: "post",
        url: "http://www.mydomain.no/action.php",
        data: $(that).closest('form').serialize(),
        success: function (data) {
            showList();
            // showlist() returns an updated list of entries from the database after the selected row is deleted.
        }
    });
});

如何进行动态列表转移＆＃34; unknown＆＃34; id使用静态脚本

4 个答案: