使用 JSONP 在 javascript 小部件中导航答案

【问题标题】：Navigation in javascript widget using JSONP使用 JSONP 在 javascript 小部件中导航
【发布时间】：2013-01-31 09:48:25
【问题描述】：

我正在开发可以在任何网站上显示的 javascript 小部件。

看。

当我需要在小部件中的页面之间导航时，我现在遇到了问题。请参阅下面的代码。但是现在我很困惑如何在来自服务器的 html 中组织导航（链接点击、ajax 更新），使其像没有小部件一样工作，因为我想像往常一样调试它。

<img alt="TEST" onclick="window.zs.LoadStep1('ad507a69-d882-41d4-8300-bd9f7163d419',this);" style="cursor:pointer;"/>

;
(function (window, ZS, undefined) {
    var zs = window.zs = ZS || {};
    zs.Version = "v1_0";
    zs.baseUrl = "http://localhost/w/";
    var jQueryScriptOutputted = false;
    var containerSelector = '#zaprosWidgetContainer';
    function initJQuery() {
        if (typeof (jQuery) == 'undefined') {
            if (!jQueryScriptOutputted) {
                jQueryScriptOutputted = true;
                document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js\"></scr" + "ipt>");
            }
            setTimeout("initJQuery()", 50);
        }
    };

    function initContainer() {
        if ($(containerSelector).length == 0) {
            $('<div id="zaprosWidgetContainer" style="width=500px;height:500px;"></div>').appendTo('body');
        }
    }

    zs.LoadStep2 = function (serviceId) {
        $.ajax({
            url: zs.baseUrl + 'Wizard/Step2JsonP?jsoncallback=?',
            data: { serviceId: serviceId },
            type: "GET",
            dataType: "jsonp",
            jsonpCallback: "callBack",
            success: function (json) {
                $(containerSelector).html(json.Html);
            }
        });

    },
    zs.LoadStep1 = function (providerId) {
        $(function () {
            $.ajax({
                url: zs.baseUrl + 'Wizard/Step1JsonP?jsoncallback=?',
                data: { providerId: providerId },
                type: "GET",
                dataType: "jsonp",
                jsonpCallback: "callBack",
                success: function (json) {
                    $(containerSelector).html(json.Html);
                }
            });

        });
    };
    initJQuery();
    initContainer();

})(window, window.zs || {});

【问题讨论】：

标签： javascript jquery asp.net-mvc jsonp

【解决方案1】：

我了解到您想要导航到不使用 ajax 样式的 LoadStep1/LoadStep2？

您可以在 ASP.NET 中创建一个母版页，其中包含一个链接/按钮以导航到下一步。该链接是作为上一步的一部分生成的。

例如在 Step1 的输出 html 上添加

 <a href="/.../Step2InMaster?serviceID=13">Next Step</a>

您能告诉我们为什么必须创建“非小部件模式”来进行调试吗？调试有什么区别？

关于 JsonP 的其他一些对我有帮助的地方：

您还可以扩展将 JSON 数据包装到 JsonP 字符串中的 JsonP 类，以支持在未提供回调方法时返回正常的 JSON - 这样您可以使用相同的 uri 直接返回 html。我使用它来允许小部件同时在 JsonP 和 Json 中运行。

【讨论】：

非小部件模式需要创建为“开发环境”进行简单调试。小部件模式将作为“生产环境”。回调样式的调试和更改比仅使用您在标题中编写的母版页和简单导航相当困难。