Javascript 用于多表单的AJAX Post_Javascript_Php_Jquery_Ajax_Forms

Javascript 用于多表单的AJAX Post

javascript php jquery ajax forms

Javascript 用于多表单的AJAX Post,javascript,php,jquery,ajax,forms,Javascript,Php,Jquery,Ajax,Forms,我有一个列表，每一行都是一个带有提交按钮的表单。当我提交表单时，数据通过post发送，并且必须使用结果更新div。但在发送帖子时存在一个问题，javascript无法正确发送数据这是一个索引文件： <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut

我有一个列表，每一行都是一个带有提交按钮的表单。当我提交表单时，数据通过post发送，并且必须使用结果更新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>


$（函数（）{
$（“.notif close”）。单击（函数（e）{
e、 预防默认值（）；
var notif_id=$（“.notif_id”）.val（）；
变量数据='notif_id='+notif_id；
$.ajax({
类型：“POST”，
url:“post.php”，
数据：数据，
发送前：函数（发送）{
$（“#notif_box”）.fadeOut（400，函数（）{
$（'.loader'）.fadeIn（50）；
}
)},
success:function（html）{//在我们得到结果之后，就会发生这种情况
$（“.loader”）.fadeOut（50，函数（）
{ 
$（“#notif_box”）.html（html）.fadeIn（400）；
$（“.notif_id”）.val（“”）；
});
返回false；
}
});   
});
});
notif-close1
notif-close2
结果
请稍候。。。

这是post.php：

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

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

试试换衣服

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

var data = { 'notif_id' : notif_id }

到

你也可以试着换衣服

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

var data = { 'notif_id' : notif_id }

您也有相同的id:#notif_id，#notif_close，这可能（也将）导致错误和冲突。您必须提供唯一的ID。为输入元素和表单指定唯一名称也是一个更好的主意。

更改此变量notif_id=$（“.notif_id”）.val（）；to var notif_id=$（this.val（）；