jquery - 如何在 Jquery Ajax 中正确引用发布的表单数据

Question

我认为我的 beforeSend 函数不起作用(背景颜色没有变化)的原因是因为它看不到变量 id 的值。如何正确引用从表单发布的 id 变量。这是相关的 html 和 js:

html

<div id="rec<?php echo $id; ?>"class="del_box">
 <form method="post" class="delform">
  <input name="id" type="hidden" id="id" value="<?php echo $id; ?>" />
  <input name="ad_link" type="hidden" id="ad_link" value="<?php echo $ad_link; ?>" />
  <input name="listing_img" type="hidden" id="listing_img" value="<?php echo $listing_img; ?>" />
  <button type="submit">Delete</button>
 </form>
</div>

js

   $("document").ready(function() {
$(".delform").submit(function() {
    data = $(this).serialize();
    if (confirm("Are you sure you want to delete this listing?")) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "delete_list.php",
            data: data,
            beforeSend: function() {
                $("#" + "rec" + data["id"]).animate({
                    'backgroundColor': '#fb6c6c'
                }, 600);
            }
            success: function(response) {
                if (response.success) {
                    $("#rec" + response.idc).slideUp(600, function() {
                        $("#rec" + response.idc).remove();
                    });
                } else {
                    console.log("An error has ocurred: sentence: " + response.sentence + "error: " + response.error);
                }
            },
            error: function() {
                alert("An Error has ocurred contacting with the server. Sorry");
            }
        });
        return false;
    }
});
});

CSS

.del_box {
background-image: none;
background-color:#9F9F9F;
}

Answer 1

如果你正在尝试做我认为你正在尝试做的事情，那么 beforeSend 就没有必要了。您正在为一个对象设置动画，但它不一定需要绑定(bind)到 Ajax 请求。只需在请求之外做动画。像这样:

data = $(this).serialize();   
if (confirm("Are you sure you want to delete this listing?")) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "delete_list.php",
            data: data,   
        });
        $("#rec" + data["id"]).animate({'backgroundColor': '#fb6c6c'}, 600);
        return false;
    }