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

Question

使用引导验证器；验证成功提交表单并尝试在#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>

Answer 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