Jquery Ajax 无法将数据定向到服务器

Posted 2023-02-24

【中文标题】Jquery Ajax 无法将数据定向到服务器

【英文标题】：Jquery Ajax failing to direct data to server

【发布时间】：2015-01-13 00:05:00

【问题描述】：

我正在尝试修复我的 jquery ajax 脚本，该脚本应该删除一个 sql 行并删除存储在服务器上的两个文件。目前，当用户单击删除按钮时，会弹出 js 确认消息，但在用户确认“是”时，脚本会死掉，没有任何内容被删除，无论是 sql 行还是文件。行标识符是“id”。如何纠正这种情况以删除数据，然后删除包含数据的元素？

html

<div class="record<?php echo $id; ?>">
      <form method="POST" id="delete_form">
        <input type="hidden" id="id" value="<?php echo $id; ?>" name="id" />
        <input type="hidden" id="ad_link" value="<?php echo $ad_link; ?>" name="ad_link" />
        <input type="hidden" id="listing_img" value="<?php echo $listing_img; ?>" name="listing_img" />
        <input type="button" class="delete" name="delete" value="Delete" />
      </form>
</div>

js（紧接在之前）

<script src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() 
    $(document).on('click', '.delete', function() 
        var element = $(this);

        if (confirm("Are you sure you want to delete this listing?")) 
            $.ajax(
                type: "POST",
                url: "delete_list.php",
                data: id: element.data("id"), ad_link: element.data("ad_link"), listing_img: element.data("listing_img") ,
                success: function() 
            );
        
        return false;
    );
);

php（在不同的页面，delete_list.php）

<?php
if (isset($_POST['id']) && ($_POST['ad_link']) || ($_POST['listing_img'])) 
$idc = $_POST['id'];
unlink($_POST['ad_link']);
unlink($_POST['listing_img']);

try 
    require('../dbcon2.php');
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $conn->prepare("DELETE FROM listings WHERE id = ?");
    $stmt->execute(array($idc));    
    
catch (PDOException $e) 
    echo $sql . "<br>" . $e->getMessage();

$conn = null;

 $url = 'http://website.com/members_area/delete_listings.php';
 while (ob_get_status()) 
  ob_end_clean();
  
  header("Location: $url");
?>

【问题讨论】：

尝试<button type="submit" class="delete" name="delete" />Delete</button> 或<input type="submit" class="delete" name="delete" value="Delete" /> 可能无法执行。如果这不能让它着火，那么我不知道它还能是什么。等待其他可能的答案。

你还有一个流浪的$sql 变量，所以我不知道它在做什么。

检查您的 Ajax 调用是否启动以及您的发布数据到

我昨晚玩了@Fred-ii-按钮设置，但没有成功，我在这里很困惑。 Firebug 没有给我任何线索。你所说的流浪 sql var 是指 $idc 吗？如果我将所有 $idc 更改为 $id，同样的问题吗？

不，echo $sql . "<br>" . $e->getMessage(); 中的 $sql 未定义。它不会破坏你的代码，它只是一个未定义的杂散变量。

【参考方案1】：

您的整个脚本 (JS) 是基于以下内容构建的：

$(document).on('click', '.delete', function() 
    var element = $(this);

也就是说，您只访问 .delete 元素的值；而它们存在于父 form 元素中。作为Fred suggested 使用提交按钮；尝试以下方法：

<form method="POST" id="delete_form">
    <input type="hidden" id="id" value="<?= $id; ?>" name="id" />
    <input type="hidden" id="ad_link" value="<?= $ad_link; ?>" name="ad_link" />
    <input type="hidden" id="listing_img" value="<?= $listing_img; ?>" name="listing_img" />
    <button type="submit">Delete</button>
  </form>

和 JS：

$('form').on('submit', function() 
    var element = $(this);

现在；您可以在 AJAX 请求中简单地传递 $(this).serialize()。

【讨论】：

让我们祈祷吧 ;) 我已经要求 OP 检查您的答案。 JS 真的不是我在编码方面的强项。

感谢@Fred-ii- 所以这里的逻辑非常合理，.serialize 似乎很理想，我正在检查 API，目前还不清楚 AJAX 请求中的何处/如何包含它。此外，它完全依赖于成功的控制，有时文件可能为空。你能推荐在哪里放置 .serialize 吗？您认为这是 null 值的问题吗？

@Rhillz devdocs.io/jquery/serialize 您将在 AJAX 中按如下方式使用它：$.ajax( type: 'POST', url: "delete_list.php", data: $(this).serialize(), ...

@hjpotter92 哇！传递表单数据的更简单方法！不过，这是一个caviete。我现在如何提取 id 并将其用于选择器以在 ajax 成功后删除正确的元素。例如，如果我想 $(element).remove() ???

@Rhillz $(this).children('#id').val()