AJAX多表单发布
AJAX Post for multiple form
我有一个列表,每一行都是一个带有提交按钮的表单。当我提交表单时,数据通过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>
这是post.php:
<?
sleep(2);
print_r($_POST);
?>
帮帮我。请告诉我我做错了什么?
尝试更改
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发布表单序列化,发布引号'
- JS验证ajax返回的html中的表单数据
- 将图像上传ajax与表单提交ajax相结合
- 使用ajax将数据从一个步骤发送到下一个步骤的3步表单
- 表单不会通过ajax提交
- Django-提交表单Ajax(替换Div)
- 在wordpress中添加带有短代码的联系表单ajax
- 成功后如何提交表单ajax帖子
- 同一页面上的多个表单AJAX
- 表单AJAX发送内部的twitter引导模式(Symfony2)
- 在Javascript中获取重力表单AJAX确认消息而不是输出
- HTML提交表单ajax响应
- Javascript表单AJAX样式
- 动态填充的Jquery表单;Ajax
- 对提交表单ajax帖子进行验证
- fanybox表单ajax post关闭提交
- jQuery表单:Ajax响应被显示,但是源代码中没有显示
- 重新加载提交表单Ajax调用
- 在jQuery上正常重新发送HTML表单ajax失败
- fanybox表单ajax提交,只有一个ajax请求