当引导验证成功时，如何使用 $.post 提交表单而不进行页面重定向？

Posted 2023-02-24

【中文标题】当引导验证成功时，如何使用 $.post 提交表单而不进行页面重定向？

【英文标题】：how to submit form using $.post without page redirection when bootstrap validation is success?

【发布时间】：2015-07-30 17:35:06

【问题描述】：

使用引导验证器；验证成功提交表单并尝试在#announcement-content div 中写入响应

问题：当#announcementpublishbtn 提交按钮单击使用$.post 发布的表单并将其重定向到#announcementpublishform 表单操作URL 时验证成功

有没有更好的方式通过 POST 提交表单？我的要求是将表单发布到操作 URL 并在同一页面 #announcement-content div 中写入响应而无需重定向。

$('#announcementpublishform').bootstrapValidator(
            message: 'This value is not valid',
            feedbackIcons: 
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            ,
            fields: 
                ...
            
        ).on('success.form.bv', function(e)
            $("#announcementpublishbtn").click(function(event) 
                event.preventDefault(); 
                var $form = $("#announcementpublishform"), url = $form.attr('action'); 
                $.post(url,$form.serialize()).done(function(dte) $("#announcement-content").html(dte); );
            );
        );

这是我的实际 HTML 表单

<form role="form" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="announcementpublishform" id="announcementpublishform" class="form-horizontal">
        <div class="box-body">
            <div class="form-group">
                <div class="col-xs-2">
                <label for="anuncmttitle" class="pull-right">Title</label>
                </div>
                <div class="col-xs-10">
                <input type="text" class="form-control" id="anuncmttitle" name="anuncmttitle" placeholder="Enter Title for Announcement">
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-2">
                <label for="anuncmtcontent" class="pull-right">Content</label>
                </div>
                <div class="col-xs-10">
                <textarea id="anuncmtcontent" name="anuncmtcontent" class="form-control" placeholder="Announcement to Publish" style="height: 120px;"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-2">
                <label for="anuncmtdate" class="pull-right">Date</label>
                </div>
                <div class="col-xs-10">
                <div class="input-daterange input-group" id="datepicker">
                    <input type="text" class="input form-control" name="start" placeholder="Select From Date" />
                    <span class="input-group-addon">to</span>
                    <input type="text" class="input form-control" name="end" placeholder="Select To Date" />
                </div>  
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-2">
                <label for="anuncmtby" class="pull-right">Announcement by</label>
                </div>
                <div class="col-xs-10">
                <input type="text" class="form-control" id="anuncmtby" name="anuncmtby" placeholder="Enter Announcement Proposed by (Ex: Staff Name or Department Name or Team Name) ">
                </div>
            </div>
        </div>
        <div class="box-footer">
            <button type="submit" class="btn btn-success" id="announcementpublishbtn">Publish</button>
        </div>
    </form>

【问题讨论】：

现在发生了什么！！不过你的代码看起来不错！

我希望我的代码将表单发布到操作 URL 并写入对内容 div 的响应。但响应显示在新的浏览器页面中。

【参考方案1】：

您需要通过在成功事件中调用preventDefault() 来阻止默认表单提交，然后在那里执行ajax 请求。

$('#announcementpublishform').bootstrapValidator(
    message: 'This value is not valid',
    feedbackIcons: 
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    ,
    fields: 
        ....
    
).on('success.form.bv', function (e) 
    e.preventDefault();
    var $form = $("#announcementpublishform"),
        url = $form.attr('action');
    $.post(url, $form.serialize()).done(function (dte) 
        $("#announcement-content").html(dte);
    );
);

演示：Fiddle

【讨论】：

它的工作。问题是什么？你是怎么找到的？