表单数据未发布到$ .ajax网址

当从自定义CSS模式发布我的表单时，数据将发布到当前网址而不是设置网址。

$("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>

第二模式（这个是在阿贾克斯后的叫法）：

<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>

如果任何人有任何想法，请让我知道。

附注：如果第二个模式叫上自己的，而不是从第一

形式提交功能工作正常。

来源

2015-07-20 PaX

将'action'形式留空意味着它将在通过jQuery和ajax运行后发布到它存在的同一页面。除了你的ajax中php脚本的位置外，我没有在你的代码中看到另一个URL，所以我想这引出了一个问题：“你期望发生什么？” –

e.preventDefault（）;应该阻止这种事情发生吗？ – PaX

这有可能是你要么动态创建$("form.delete_photo_form")选择已运行后的形式，或模态脚本可能是将表单的位置移动到DOM中（即，某些模式脚本将模式内容移动到<body>标签的最后）。

无论哪种情况，这都会导致您的提交逻辑无法运行。尝试更换：

$("form.delete_photo_form").submit(<handler>);

...有：

$(document).on("submit", "form.delete_photo_form", <handler>);

如果你不熟悉上面的语法，这是jQuery的语法event delegation，它允许你绑定事件处理程序添加到永久性内容（如document对象），然后在事件满足特定条件时有选择地运行处理程序逻辑（在这种情况下，事件必须是“submit”类型，并且必须来自与匹配的元素210选择器）。这具有让您设置事件侦听器的优点，即使相关的DOM节点尚未创建。

来源

2015-07-20 20:26:00 jmar777

虽然我还没有使用$（document）.on（“submit”，“form.delete_photo_form”，）;我发现你是正确的，并且在选择器之后创建动态表单。我现在已经改变了执行的顺序，表格按照需要工作。谢谢。 – PaX

如果你不打算提交表单，为什么不使用按钮的onclick函数，并在方法中调用ajax。

试图把每一个值，并送他们全部检查，如果他们有什么

来源

2015-07-20 20:13:36

这是我想如何做到这一点，但我不确定如何从动态创建的窗体和按钮获取表单数据。该页面可能会有许多窗体和按钮，因此为什么使用form.class提交。我确实考虑过让父母，然后所有的孩子数据，但没有成功。 – PaX

也许这是一个错误，但为什么不使用 '$（ '形式[CLASS = “delete_photo”]'）'的代替 '$（ 'form.delete_photo'）' 或简单的$（ '#id'） –

表单数据未发布到$ .ajax网址

回答

相关问题