[英]Trouble POSTing form with AJAX
编辑-信息似乎正在发布,但是在form_data.php上似乎并没有检索到发布的值
这是AJAX
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("#submit_boxes").submit(function() { return false; });
$('input[type=submit]').click(function() {
$.ajax({
type: 'POST',
url: 'form_data.php',
data: $(this).serialize(),
success: function(data) {
$('#view_inputs').html(data); //view_inputs contains a PHP generated table with data that is processed from the post. Is this doable or does it have to be javascript?
});
return false;
});
};
</script>
</head>
这是我要提交的表格
<form action="#" id = "submit_boxes">
<input type= "submit" name="submit_value"/>
<input type="textbox" name="new_input">
</form>
这是将信息发布到的form_data页面
<?php
if($_POST['new_input']){
echo "submitted";
$value = $_POST['new_input'];
$add_to_box = new dynamic_box();
array_push($add_to_box->box_values,$value);
print_r($add_to_box->box_values);
}
?>
您提交表单是因为您遇到错误,导致阻止提交表单的代码无法运行。 具体来说是dataType: dataType
和this.html(data)
。 首先, dataType
是undefined
,如果您不知道如何设置数据类型,则将其忽略。 其次, this
是指没有html
方法的form元素,您可能的意思是$(this).html(data)
尽管这不太可能是您想要的,很可能是您想要的$(this).serialize()
。 所以你的代码应该看起来像
$('form#submit_boxes').submit(function() {
$.ajax({
type: 'POST',
url: 'form_data.php',
data: $(this).serialize(),
success: success
})
return false;
});
另外,如果您必须在表单提交处理程序中调试ajax,那么您要做的第一件事就是阻止表单提交(返回false只能在最后完成),这样您就可以看到发生了什么错误。
$('form#submit_boxes').submit(function(event) {
event.preventDefault();
...
});
您可以使用jQuery的.serialize()
方法发送表单数据
以下一些不错的链接供您了解
一种处理方式...
取消通常的表单提交:
$("#submit_boxes").submit(function() { return false; });
然后为您的按钮分配一个点击处理程序:
$('input[type=submit]').click(function() {
$.ajax({
type: 'POST',
url: 'form_data.php',
data: this.html(data),
success: success,
dataType: dataType
})
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.