php-ajax 表单提交后引导警报未显示答案

【问题标题】：Bootstrap alert not showing after php-ajax form submissionphp-ajax 表单提交后引导警报未显示
【发布时间】：2016-10-14 14:51:14
【问题描述】：

我试图在用户提交表单时显示警报，无论它是否成功。该脚本在提交数据时工作正常，但未显示警报。代码是-

重要 - 表单处于引导模式。

HTML 是：

<div class="col-md-12">
     <form id="inquiry-form" method="post" action="inq.php" role="form">
         <div class="messages"></div>
         <div class="controls">
             <div class="form-group">
                 <label for="Name">Name</label>
                 <input type="text" name="name" class="form-control" id="exampleInputEmail1" placeholder="Name" required="required" data-error="Name is required."/>
                 <div class="help-block with-errors"></div>
             </div>
         </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

我的 php 脚本是：

try
{
$sql = mysqli_query($conn,"INSERT INTO wig (fname, lname, email,msg)
VALUES ('$fname', '$lname', '$email','$msg')");



$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);

header('Content-Type: application/json');

echo $encoded;
}
else {
echo $responseArray['message'];
}

而处理表单提交的jquery是：

$(function () {

$('#inquiry-form').validator();

$('#inquiry-form').on('submit', function (e) {
    if (!e.isDefaultPrevented()) {
        var url = "inq.php";

        $.ajax({
            type: "POST",
            url: url,
            data: $(this).serialize(),
            success: function (data)
            {
                var messageAlert = 'alert-' + data.type;
                var messageText = data.message;

                var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable fade in role=alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + messageText + '</div>';
                if (messageAlert && messageText) {
                    $('#inquiry-form').find('.messages').html(alertBox);
                    $('#inquiry-form')[0].reset();
                }
            }
        });
        return false;
    }
})
});

【问题讨论】：

你试过调试ajax的successfunction吗？
yup @cmnardi ，实际上它在没有模态的情况下工作正常，但在 mdal 中它不起作用。
AJAX 是否有效？
你必须使用调试控制台！！按 F12 并单击console 选项卡，出现 javascript 错误。在你的成功函数中也使用console.log(data)，愿你找到错误
在 Network 下的 console 中，您还可以查看 ajax 调用返回的内容。

标签： php jquery ajax twitter-bootstrap bootstrap-modal

【解决方案1】：

尝试将die 添加到您的 php 脚本中，如下所示：

    echo $encoded;   
}else {
    echo $responseArray['message'];
}
die();

【讨论】：