Question

我有一个页面使用AJAX从php脚本调用一些html。因为html是具有唯一id的特定类的许多形式。在单击提交按钮时，希望通过AJAX将表单提交到php脚本，以便页面不会重新加载或重定向。

我已经按照许多教程（Here for example）的示例进行了操作，但它们都有效...如果我在包裹它们的$(document).ready(function(){...});中发出警报。我尝试过至少三种或四种方法，结果总是一样的。没有alert() .ready()表格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 i的代码。

- 修改 - 有人指出问题可能是页面上的其他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

我认为它的时间安排。这就是为什么“警报（''）”无法删除。将脚本更改为

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调用它之前插入到模型中

表单提交在AJAX之前完成，没有'alert（）'

3 个答案: