php - 使用 Jquery(ajax) 防止页面重新加载的最佳方法是什么？

Question

摘要:我有一个:

1) 主页面(Main.php)2)简单的.js脚本文件(dashboard.js)3)另一个简单的.php文件(form1.php)4)process.php，处理.js文件(process.php)发送的信息的文件

就像 tumblr 一样，我试图重新创建相同的“导航”体验 - 单击几个选项，用新代码替换主面板，并在填写某些表格时，将该信息发送给 BD 并在中显示结果Main.php

一切都很顺利，除了最后一步。单击导航按钮(main.php)，通过javascript(dashboard.js + form1.php)引入新表单，填写该表单后，我单击按钮，而不是不重新加载页面(jquery->ajax)，它将我发送到 process.php 文件并显示结果。

我尝试不使用“return false”和“event.preventdefault()”重新加载，但结果仍然相同。

JS代码

        $('form.ajax').on('submit', function() {
    event.preventDefault();
    var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};

    that.find('name').each(function(index, value) {

        var that = $(this),
        name = that.attr('name'),
        value = that.val();

        data[name] = value;

    });


    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(html){
                    event.preventDefault();
                    $("ol#list-feed").append(html);
                    document.getElementById('set-width1').value='';
                    document.getElementById('tags').value='';

                }


    });
    event.preventDefault();
    return false;
});

Answer 1

您尚未定义事件:

$('form.ajax').on('submit', function(event) {
    event.preventDefault();
    //...
});