Question

我有一个列表，每行都是一个带有提交按钮的表单。当我提交表单时，数据通过帖子发送，必须用结果更新div。但发送帖子时出现问题，javascript无法正确发送数据。

这是索引文件：

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function() {
    $(".notif-close").click(function(e) {
        e.preventDefault();
        var notif_id = $(".notif_id").val();
        var data = 'notif_id='+ notif_id;
        $.ajax({
            type: "POST",
            url: "post.php",
            data: data,
            beforeSend: function(send) {
                $("#notif_box").fadeOut(400, function() {
                    $('.loader').fadeIn(50);
                    }
                )},
            success: function(html){ // this happen after we get result
                $(".loader").fadeOut(50, function()
                { 
                    $("#notif_box").html(html).fadeIn(400);
                    $(".notif_id").val("");

                });
                return false;
            }
        });   
    });
});
</script>
</head>
<body>
    <form method='post' action='post.php'>
        <input type='hidden' id='notif_id' name='1' class='notif_id' value='1' />
        <button type="submit" id="notif-close" class="notif-close">notif-close1</button>
    </form>
    <form method='post' action='post.php'>
        <input type='hidden' id='notif_id' name='2' class='notif_id' value='2' />
        <button type="submit" id="notif-close" class="notif-close">notif-close2</button>
    </form>
    <div class='notificationsblock' id='notif_box'>Result</div>
    <span class='loader' style="display: none; position: absolute;">Please wait...</span>
</body>
</html>

这是post.php：

 <?
 sleep(2);
 print_r($_POST);
 ?>

帮帮我。请告诉我我做错了什么？

Answer 1

尝试更改

var notif_id = $(".notif_id").val();

到

var notif_id = $(this).parent().find(".notif_id").val();

您也可以尝试更改

var data = { 'notif_id' : notif_id }

您也有相同的ID：#notif_id，＃notif_close，它们可能（并将会）导致错误和冲突。您必须提供唯一ID。为输入元素和表单赋予唯一名称也是一个更好的主意。

AJAX发布多种形式

1 个答案: