带有 JSON 的 JQuery UI 选项卡 beforeLoad 方法答案

【问题标题】：JQuery UI tabs beforeLoad method with JSON带有 JSON 的 JQuery UI 选项卡 beforeLoad 方法
【发布时间】：2013-01-29 17:23:33
【问题描述】：

我尝试动态加载选项卡的内容。 Source 是由 [WebMethod] 属性修饰的 ASP.NET 方法。

[WebMethod]
public static string Result()
{
   return RenderControl("WebUserControl1.ascx");
}

当标签被这段代码加载时它工作正常：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Dynamic User Control</a></li>
    </ul>
    <div id="tabs-1">
    </div>
</div>

$.ajax({
    type: "POST",
    url: "WebForm1.aspx/Result", 
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        $('#tabs-1').html(msg.d);
    },
    error: function (msg){ 
        $('#tabs-1').html('Cannot load');
    }
});

但是当标签定义不同时：

<div id="tabs">
    <ul>
        <li><a href="WebForm1.aspx/Result">Dynamic user Control</a></li>
    </ul>
    <div id="tabs-1">
    </div>
</div>

然后此调用加载整个页面内容并将其放入选项卡中。因此，我尝试将数据类型更改为 json，但随后整个选项卡加载在 ajax 调用中的某处失败。

$("#tabs").tabs({

    beforeLoad: function (event, ui) {
        ui.ajaxSettings.accepts = { json: "application/json, text/javascript" };
        ui.ajaxSettings.contentType = "application/json; charset=utf-8";
        ui.ajaxSettings.type = "POST";
        ui.ajaxSettings.dataTypes[0] = "json";

        ui.jqXHR.error = function () {
            $('#tabs-3').html('Cannot load');
        }
    },
});

检查了随请求发送了哪些标头，并且这些对 ajaxSettings 的修改根本不会发送到服务器。

你能告诉我正确的方向吗？

使用的 JQuery-UI 版本是 1.10.0。使用的 JQuery 版本是 1.9.0。

编辑：在 Firebug 中检查 Content-Type 标头未根据 ajaxSettings 设置为 application/json。因此网页以 text/html 响应进行响应。确认如果请求标头被强制为 json（通过 live headers firefox addon），则返回 json 响应。有没有办法强制标签传递正确的 http 标头？

【问题讨论】：

您是否尝试过使用[ScriptMethod(ResponseFormat = ResponseFormat.Json)]（除了WebMethod 属性）？否则，asp.net 不会期望 JSON 格式的数据...
感谢您的提示。我已经添加了该属性，但它没有帮助，因为 ajax 调用是使用错误的标头完成的。如果有正确的请求标头，则 asp.net 页面会正确返回 json 响应。这就是第一种方法有效的原因。

标签： asp.net ajax json jquery-ui-tabs

【解决方案1】：

UI 选项卡beforeLoad 方法基本上是Ajax 的beforeSend 函数。对于您的特定问题，您必须这样做

ui.jqXHR.setRequestHeader("Accept", "application/json, text/javascript");
ui.ajaxSettings.type = "POST";
ui.ajaxSettings.dataTypes[0] = "json";

这将改变请求的接受头。

【讨论】：