Javascript 防止Ajax表单发送；通常是；行不通

我正在尝试使用Ajax发送表单。 因此，由于stackoverflow，我使用

event.preventDefault（）阻止表单正常发送

但这不会有帮助，因为我总是被重定向到sendMail.php文件

这是我的密码：

$(document).on('submit', '.mailForm', function(e) {
{
    e.preventDefault();
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function()
        {
            $("#sendBox").show('slow');
        }
    });
    return false;
});

编辑：这是我的表格：

<form role="form" class="mailForm" action="sendmail.php" method="post">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-user"></i></div>
                        <input class="form-control" type="text" id="fName" placeholder="<? LangText("Name", "Nom", "Name"); ?>" required="required">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-envelope-o"></i></div>
                        <input class="form-control" type="email" id="fMail" placeholder="<? LangText("E-Mail Adresse", "Adresse électronique", "email adress"); ?>" required="required">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-users"></i></div>
                        <input class="form-control" type="text" id="fCompany" placeholder="<? LangText("Firma", "Entreprise", "Company"); ?>" required="required">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-file-text-o"></i></div>
                        <textarea class="form-control" rows="5" id="fText" required="required"></textarea>
                    </div>
                </div>
                <button type="submit" class="btn btn-default" id="submitMail"><? LangText("Absenden", "Envoyer", "Send"); ?></button>
            </form>

您需要在表单的“发送”按钮上绑定事件

            $('.trigger_buttton').on('click', function(e) {
            {
                e.preventDefault();
                $.ajax({
                    url: $('.mailForm').attr('action'),
                    type: $('.mailForm').attr('method'),
                    data: $('.mailForm').serialize(),
                    success: function()
                    {
                        $("#sendBox").show('slow');
                    }
                });
            });

而不是：

$(document).on('submit', '.mailForm', function(e) {

尝试：

请尝试改用.submit（）

在（'submit'，函数（e）上尝试$（“.mailForm”）{…您的浏览器开发工具的控制台窗口中有Javascipt错误吗？如果它仍然重定向到操作页面，那么您的JS中就有错误。请检查页面加载时的控制台日志。您可以编辑您的问题并放置表单的HTML吗？问题现在已编辑。如果用户点击“回车”提交怎么办？哦，对不起，还没有嗯，我刚刚提交了我的答案并关闭了我的标签。这就是对我有效的rofl XDL！谢谢。Ajax不能用类而不是ID来处理表单吗？为什么这些选项的功能会不同？我的意思是，为什么你的建议有效，而OP的方法无效？
on（'submit'…
捕获与
submit
相同的事件，但只有在它将DOM冒泡到文档后…它可以，我才更改它。但是为什么要使用类？您有多个相同类型的表单？@jwatts1980很好，这正是我记得这样做的方式。我记得preventDefault（）也有同样的问题。）和return false；。如果OP省略preventDefault（）并让return false处理它呢？这里没有时间进行测试。@MennoGouw这很有趣……我必须记住这一点。据我所知，我没有遇到过不能在表单中使用ID的情况。所以我总是使用
submit（）
…您展示了出色的复制/粘贴技能：），iirc e.preventDefault（）不是必需的，因为return false就是这么做的。：）我只专注于.submit（）上
$(".mailForm").submit(function(){
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function()
        {
            $("#sendBox").show('slow');
        }
    });
    return false;
});

$(".mailForm").submit(function(e)
{

  $.ajax({
    url: $(this).attr('action'),
    type: $(this).attr('method'),
    data: $(this).serialize(),
    success: function()
    {
        $("#sendBox").show('slow');
    }
  });
 return false;
});