成功函数未捕获 JSON 响应答案

【问题标题】：JSON response not captured by success function成功函数未捕获 JSON 响应
【发布时间】：2016-05-21 07:31:28
【问题描述】：

我正在对返回 json 对象的控制器进行这个简单的 ajax 调用。这是代码

<script type="text/x-jquery-tmpl">
$(function () {
    var submitButton = $("#submitButton");
    var infoForm = $("#infoForm");    
    submitButton.click(function() {
        submitInfo(infoForm)
    });
});
function submitInfo(formContainer) {      
    $.ajax({
        type: "POST",
        url: "@Url.Action("ChangePassword", "Account")",
        data: formContainer.serialize(),
        success: function (data) {
            alert(data);
        },
        error: function (data) {
            alert(data);
        }
    });
}
</script>

控制器：

[HttpPost]
    public JsonResult ChangePassword(ChangePasswordViewModel model)
    {
        //some code
        return Json("ok", JsonRequestBehavior.AllowGet);
    }

这是 HTML

<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Change Password</h4>
    </div>
    <div class="modal-body">
        @using (Html.BeginForm("ChangePassword", "Account", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary("", new { @class = "text-danger" })

            <fieldset id="infoForm">
                <div class="form-group">
                    @Html.LabelFor(model => model.oldPassword)
                    @Html.PasswordFor(model => model.oldPassword, new { @class = "form-control", required = "" })
                    @Html.ValidationMessageFor(model => model.oldPassword)
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.newPassword)
                    @Html.PasswordFor(model => model.newPassword, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.newPassword)
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.confirmPassword)
                    @Html.PasswordFor(model => model.confirmPassword, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.confirmPassword)
                </div>

                <div class="text-danger">
                    @if (TempData["ErrorMessage"] != null)
                    {
                        @TempData["ErrorMessage"]
                    }
                </div>

                <div class="modal-footer">
                    <button class="btn btn-primary" id="submitButton">Save</button>
                </div>
            </fieldset>
        }
    </div>
</div>
</div>

这是我调用以显示弹出表单的局部视图。

但是单击提交按钮会返回一个新视图，上面只写有“ok”（带引号）。即使删除警报（），我也会得到相同的结果。这段代码有问题吗？

【问题讨论】：

您的 json 响应不包含属性名称 Message。只需使用alert(data);（或者您可以将控制器代码更改为return Json(new { Message = "ok" }, JsonRequestBehavior.AllowGet);）
什么是console.log(data);
无论如何您都没有使用表单提交操作。然后将按钮的类型更改为type="button"
如果带有id="submitButton"的元素是提交按钮或输入，则必须取消默认操作（在脚本的最后一行添加return false; - 在submitInfo(infoForm)之后）
@StephenMuecke 我写错了。已编辑。

标签： jquery json ajax asp.net-mvc

【解决方案1】：

你的控制器应该是，

[HttpPost]
public JsonResult ChangePassword(ChangePasswordViewModel model)
{
    //some code
    return Json(new { Message="OK"}, JsonRequestBehavior.AllowGet);
}

【讨论】：

ok @Resham 只需将调试器放入您的成功函数中，看看数据中有哪些数据？是否有任何数据。消息可用与否..
什么不可用，data 还是 data.message？
@Bharat，您需要阅读问题中的 cmets - OP 只是打错字了，这与问题无关 :)

【解决方案2】：

尝试在 ajax 调用中添加 async: false 或将整个 Ajax 调用代码块保留在 click 函数中。

【讨论】：