表單提交在AJAX之前完成，沒有'alert（）'

Question

我有一個頁面使用AJAX從php腳本中調用一些html。 在該html中，具有唯一ID的某個類的許多形式。 單擊提交按鈕后，希望通過AJAX將表單提交到php腳本，以使頁面不會重新加載或重定向。

我遵循了許多教程的示例（ 例如此處 ），它們都可以工作...如果我在$(document).ready(function(){...});發出警報， 包裹他們。 我嘗試了至少三種或四種方法，結果始終是相同的。 在.ready()沒有alert()的形式，POSTS到當前頁面。

因此，我要尋找的是需要在調用發送POST的函數之前拋出alert()的修復程序，因為沒有它，POST不會被AJAX捕獲，而只會發布到當前的.php文件中。

AJAX

function formSubmit(form) {

    var element = $(form);
    var id = element.attr("id");
    var form = new FormData($('#' + id)[0]);

    $.ajax({
        type: "POST",
        url: "deleter.php",
        data: form,
        cache: false,
        contentType: false,
        processData: false,

    });
}

$(document).ready(function () {
    alert(''); // Taking this out causes problems

    $('.delete_form').on('submit', function (event) {
        event.preventDefault();
        formSubmit(this);

    });
});

的HTML

<div class="box">
    <div class="image">
        <a href='.htmlspecialchars($string).'><img src="blank.gif" data-src="'.htmlspecialchars($small).'" width="250" height="376"></a>
    </div>
    <div class="boxOffice">
        <form class="delete_form" id="'.$form_count.'">
            <input  type="hidden" name="delete_link" id="delete_link"value="'.  $string .'" />
            <input  type="submit" name="submit" class="submitButton" id="deleteLinkButton" value=""/>
        </form>
    </div>
</div>

我意識到大約有200個與此相關的問題...我知道，因為我嘗試了他們的解決方案。 我是AJAX的新手（這是我的第一個項目），並且我無法以相同的結果重新安排代碼。

如果需要的話，我將包含用於獲取包含的html的代碼。

- 編輯 -有人指出問題可能出在頁面上的其他JS干擾了呼叫等。因此，我將頁面上的所有JS代碼准確地附加到當前狀態。 在這種狀態下，POST會按預期執行，但是一旦我刪除alert()它就不會執行。

有趣的是，當我抓取代碼時，我將getImages()調用移入了ready()並移出了它，這似乎會影響POST代碼是否正常工作。 我不知道為什么，但這可能是一個線索。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.unveil.js"></script>

<script>
    $(document).ready(function () {
        alert(''); // Taking this out causes problems


            $('.delete_form').on('submit', function (event) {
                event.preventDefault();

                var element = $(this);
                var id = element.attr("id");
                var form = new FormData($('#' + id)[0]);

                $.ajax({
                    type: "POST",
                    url: "deleter.php",
                    data: form,
                    cache: false,
                    contentType: false,
                    processData: false,

                });
            });

    });

    getImages(); // Moving this inside the .ready(func(){...}) breaks the POST ?? 

    function getImages() {
        $.ajax({
            type: "GET",
            url: "http://localhost/linkler/get_images.php?tag=chubby",
            cache: false,
            timeout: 30000,
            success: function(html){
                $('body').append(html);
                $("img").unveil(); 
            }
        });
        return false;
    }

</script>

Answer 1

不確定到底是什么問題，但是可以簡化您的js：

$(document).ready(function() {

    $('body').on('submit', '.delete_form', function (ev) {
        ev.preventDefault();
        $.ajax({
              type: "POST",
              url: "deleter.php",
              data: $( this ).serialize(),
              success:function(data){
                   alert(data);
              },
              error:function(data){
                   alert(data);
              },


        });

    });
});

編輯您通過ajax加載表格正確嗎？ 在這種情況下，您必須將函數綁定到父元素（主體）。 請參閱我的語法更改。

Answer 2

只是從准備文檔的部分中刪除此方法

 $('.delete_form').on('submit', function (event) {
        event.preventDefault();
        formSubmit(this);

    });

Answer 3

我認為這與時機有關。 這就是為什么無法刪除“ alert（''）”的原因。 將腳本更改為類似

function delete_form_init(){
 $('.delete_form').on('submit', function (event) {
    event.preventDefault();
    formSubmit(this);
    }



function formSubmit(form) {

var element = $(form);
var id = element.attr("id");
var form = new FormData($('#' + id)[0]);

$.ajax({
    type: "POST",
    url: "deleter.php",
    data: form,
    cache: false,
    contentType: false,
    processData: false,

});
}

$(document).ready(function () {
   delete_form_init();

});

}）;

這樣，函數delete_form_init將在.ready調用之前插入模型中