使用 Javascript 提交值答案

【问题标题】：Submit Value With Javascript使用 Javascript 提交值
【发布时间】：2009-12-03 07:07:27
【问题描述】：

我被以下功能卡住了：

<script type="text/javascript">
function removeElement($parentDiv, $childDiv){


     if (document.getElementById($childDiv)) {    
          var child = document.getElementById($childDiv);
          var parent = document.getElementById($parentDiv);
          parent.removeChild($child);
     }
}
</script>

<a href=\"javascript:;\" onClick=\"removeElement('$parent','$child');\">x</a>

此函数删除一个子元素及其内容，这在客户端非常有用！但我想在同一个实例中将一个值传递给服务器，因此元素的内容也可以从 mysql 数据库中删除。我不知道如何做到这一点，所以任何建议将不胜感激！

注意：$child 和 $parent 是在 php 文件中生成的字符串，我用它们来给每个元素一个唯一的 ID。

【问题讨论】：

我不是一个出色的服务器端程序员，但我很快就学会了。如果有这样的事情，我是一个相当优秀的 javascript 程序员。给您的问题：您能否在同一个 removeElement 函数中通过 XMLHttpRequest 将 cgi、restlike 或动态脚本标记请求发送回服务器？
@jeremyosborne -> 嗯？我一点头绪都没有？说到 javascript，我完全是个菜鸟。
您是否在使用一些客户端框架、Jquery、scriptaculos、moo 工具。到时候一切都变得超级简单。
我们在这里开始了一个很好的评论线程，但也许我们可以回答您的问题。 @Ori 有一点，这很容易，但是您能告诉我们，如果我们只是向您的 CMS 发送查询以删除内容，那么 url 会是什么样子？
@jeremyosborne - page.php?delete=elementID

标签： php javascript mysql ajax

【解决方案1】：

为了让您的生活更轻松，请使用 jQuery 或类似的框架。以下是您在 jQuery 中的操作方式：

$(function() {
    $('.delete').click(function() {
        var link = $(this);
        var id = link.attr('id').replace('element_', '');
        $.ajax({
            url: 'handler.php',
            data: {
                element: id
            },
            type: 'post',
            success: function() {
                link.remove();
                // Or link.closest('tr').remove() if you want to remove a table row where this link is
            }
        });
        return false;
    });
});

HTML：

<a href="#" class="delete" id="element_20">Remove</a>

还有handler.php：

mysql_query("DELETE FROM `table` WHERE id = '".mysql_real_escape_string($_POST['element'])."'");

永远记得转义数据库输入！

如果你像你所说的那样完全是菜鸟，你可能不会理解所有这些，所以我建议你阅读一些关于 jQuery 的 AJAX 功能以及使用 jQuery 或类似 JavaScript 框架进行整体开发的内容。

【讨论】：

嗨，谢谢！一切正常，除了删除元素而不是删除链接？我尝试了link.closest（'tr'）.remove（），只是将tr更改为div ...但它不起作用？有什么建议吗？
取决于您要删除的内容。如果删除链接在您要删除的元素内，则 .closest('div');应该管用。如果不是，您必须尝试其他方法。在 docs.jquery.com 上查看 jQuery 关于遍历和选择器的文档。

【解决方案2】：

假设我想使用 ID 删除实体

JQUERY - $.post() 这是一种向服务器发送简单 POST 请求的简单方法，无需使用更复杂的 $.ajax 函数。它允许指定将在请求完成时执行的单个回调函数（并且仅当响应具有成功的响应代码时）。 Jquery post docs

在服务器上假设您有一个打开的数据库连接。

mysql_query("从表中删除 ID = ".$_POST['ID']);

更多 on mysql_query 在这里找到

编辑：

所以下面的内容只会在 ajax 发布完成后移除元素。请注意，第一个参数是执行操作的脚本的 url，第二个是要发送的数据，在这种情况下，ID post 值将是 {child.id}，第三个是匿名内联回调函数，它将采用删除元素客户端的操作。

<script type="text/javascript">
function removeElement($parentDiv, $childDiv){
if (document.getElementById($childDiv)) {
          var child = document.getElementById($childDiv);
          var parent = document.getElementById($parentDiv);  
          $.post('{URLTOSCRIPT}', 'ID=$child.id',function () { parent.removeChild($child); });

}}
</script>

【讨论】：

谢谢！那么如何在不破坏 removeElement() 功能的情况下将其集成到现有代码中呢？可以举个例子吗？
再次感谢！我使用您的 sn-p 收到来自 firebug *missing 形式参数的错误。还有 URLTOSCRIPT -?我是否将其替换为将处理数据的页面的 url？对不起，如果我的菜鸟很烦人
是替换包含 {} 的 urltoscript 并在第二个参数 $child.id 中替换为所需的实际值。即 ID=3 或 ID=SWK01 ...
抱歉，我花了这么长时间...我无法让您的 sn-p 工作。它不发布，它返回错误缺少形式参数

【解决方案3】：

当您调用该函数时，您希望将 PHP 变量放入如下标签中：

<?php echo $parent; ?>

和

<?php echo $child; ?>

在函数定义中，您将希望摆脱 PHP 样式变量并使用以下内容：

function removeElement(parentDiv, childDiv) { //CODE }

【讨论】：

JS 函数位于 PHP 函数页面中。它仍然按照您的代码建议的方式输出。