[英]Form data not being posted to $.ajax url
从自定义CSS模式发布表单时,数据将发布到当前URL,而不是设置的URL。
$("form.delete_photo_form").submit(function(e)
{
e.preventDefault();
$(".delete_photo_message").text("");
$.ajax({
url: 'assets/php/delete_photo.php',
type: 'post',
data: $(this).serialize(),
success: function(data, status)
{
if (data == 1)
{
$(".delete_photo_message").text("Unable to delete photo");
}
else if (data == 2)
{
$(".delete_photo_message").text("Photo deleted");
// checkGroup();
}
else
{
$(".delete_photo_message").text(data);
}
},
error: function(xhr, desc, err) {
console.log(xhr);
console.log("Details: " + desc + "\nError:" + err);
}
});
此表单是从另一个模式打开的模式中发布的。
原始模式:
<div id="photo_buttons">
<a id="edit_photo_modal" class="button" href="#edit_photos_modal">
Edit Photos
</a>
<div id="edit_photos_modal" class="modal_photos">
<div>
<a id="close_edit_photo" title="Close" href="#close"></a>
Edit Photos:
<br></br>
<br></br>
<div class="edit_photos_div">
<div class="photo_line">
<img src="images/thumbnails/group/11/bb0878d2390cdcfb.jpg"></img>
<br></br>
<a id="edit_photo" class="open_modal" href="#modal_edit_photo_39">
Edit
</a>
/
<a id="delete_photo" href="#modal_delete_photo_39">
Delete
</a>
<br></br>
<br></br>
</div>
</div>
<a id="finish_edit" class="button" title="Finish" href="#finish">
Finish
</a>
</div>
</div>
<script src="assets/js/edit_photo.js"></script>
第二模态(这是调用ajax帖子的地方):
<div id="edit_modals">
<div id="modal_edit_photo_39" class="modal">
<div>
<a id="close_39" title="Close" href="#close">
Close
</a>
<form id="edit_photo_form_39" class="edit_photo_form" method="post" action="">
<h4>
Edit Photo
</h4>
<br></br>
<h3 id="edit_photo_message" class="edit_photo_message"></h3>
Title:
<input id="edit_title" type="text" value="Test photo" name="edit_title"></input>
Description:
<textarea id="edit_desc" name="edit_desc" rows="3">
Test for resize
</textarea>
<br></br>
<input type="hidden" value="11" name="group_id"></input>
<input type="hidden" value="39" name="photo_id"></input>
<input id="edit_photo_yes_39" class="edit_yes" type="submit" title="Edit" value="Edit" name="edit_yes"></input>
<a id="cancel_edit" class="button" title="Cancel" href="#cancel_edit">
Cancel
</a>
</form>
</div>
</div>
<div id="modal_delete_photo_39" class="modal">
<div>
<a id="close_39" title="Close" href="#close">
Close
</a>
<form id="delete_photo_form_39" class="delete_photo_form" method="post" action="">
<h4>
Are you sure you want to delete this photo?
</h4>
<br></br>
<h3 id="delete_photo_message" class="delete_photo_message"></h3>
<input type="hidden" value="11" name="group_id"></input>
<input type="hidden" value="39" name="photo_id"></input>
<input id="delete_photo_yes_39" class="delete_yes" type="submit" title="Yes" value="Yes" name="delete_yes"></input>
<a id="del_no" class="button" title="No" href="#no">
No
</a>
</form>
</div>
</div>
</div>
如果有人有任何想法,请告诉我。
边注:
如果第二个模式本身而不是第一个模式被调用,则表单提交功能可以正常工作。
如果您根本不提交表单,为什么不使用按钮的onclick函数,并且在该方法中调用ajax。
尝试获取每个值并将其发送给所有人,以检查它们是否有东西
您有可能在$("form.delete_photo_form")
选择器运行后动态创建表单,或者模式脚本可能正在DOM中移动表单的位置(即,某些模式脚本将模式内容移动到了DOM)。 <body>
标签的结尾)。
无论哪种情况,这都会导致您的提交逻辑无法运行。 尝试更换:
$("form.delete_photo_form").submit(<handler>);
...有:
$(document).on("submit", "form.delete_photo_form", <handler>);
如果您不熟悉上述语法,那么它是事件委托的jQuery语法,它使您可以将事件处理程序绑定到永久性对象(如document
对象),然后在事件满足特定条件时有选择地运行处理程序逻辑(在在这种情况下,事件的类型必须为“提交”,并且必须源自与"form.delete_photo_form"
选择器匹配的元素内)。 这样做的优点是,即使尚未创建相关的DOM节点,也可以设置事件侦听器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.