jquery - 全局 AJAX 设置未在自定义模式 (DurandalJS) 上触发

Question

我有 DurandalJS 单页应用程序， 所有数据均从 API 请求中检索，所需 header 包括要设置的 X-Auth-Token。 一切正常，除了当我调用自定义模式来显示 iframe 时，

下面您可以看到我如何在 main.js 上设置全局 Ajax 设置:

$(document)
.ajaxSend(function(event, xhr, settings)
{
    var token = getCookie('X-Auth-Token') || getSession('X-Auth-Token');

     if (token)
        xhr.setRequestHeader('X-Auth-Token', token);
})
.ajaxError(function(event, xhr, settings){
    if (xhr.status === 401)
    {
        tokenExpired();
    }
});

这是自定义模式的代码:

customModal.js

define(['plugins/dialog', /* etc */ ], function (dialog, /* etc */) {

    var iframeBox = function(id, title)
    {
        this.id         = id;
        this.title      = title;
    };

    iframeBox.prototype.ok = function()
    {
        dialog.close(this);
    };

    iframeBox.prototype.download = function()
    {
        window.location.href = "http://example.com/api/storages/" + this.id + "/download";
    };

    iframeBox.show = function(id, title)
    {
        return dialog.show(new iframeBox(id, title));
    };

    return iframeBox;
});

customModal.html

<div class="modal-content messageBox">
    <div class="modal-header">
        <div class="tr">
            <div class="pull-right">
                <div class="clearfix"></div>
                <button data-bind="click: download">
                    <i class="fa fa-cloud-download"></i>
                </button>
            </div>
            <div class="td td-auto">
                <h5 data-bind="text: title"></h5>
            </div>
        </div>
    </div>
    <iframe data-bind="attr: { src: 'http://example.com/api/storages/' + id + '/view' }">
    </iframe>
    <div class="modal-footer">
       <button class="btn btn-primary" data-bind="click: ok">Ok</button>
    </div>
</div>

当显示自定义模式时，
它还会向 http://example.com/api/storages/{id}/view

发出请求

但它不会触发之前设置的全局 $.ajaxSend 。

请大家帮忙。

Answer 1

假设请求不是跨域，并且假设动态生成的URL返回的数据是JSON。即使假设不成立，您也可以使用其他设置更改 ajax 请求的类型，它应该可以工作。

试试这个 fiddle http://jsfiddle.net/khagesh17/3qb8X/3/

ko.bindingHandlers.ajaxIframe = {
    update: function(element, valueAccessor) {
        var src = ko.utils.unwrapObservable(valueAccessor());
        // we may use $.load if that fits your purpose of binding html inside iframe
        // i am not aware if you are returning html or json from that url
        $.ajax({
            url: src,
            type: 'post',
            dataType: 'json',
            data: { 
                json: JSON.stringify({
                    'a': '1',
                    'b': '2',
                    'c': '3',
                    'd': '4'
                }),
                delay: 3 
            },
            beforeSend: function(jqXhr) {
                 // here as well you can hook to add header to this request
            }
            success: function(data) {
                // now we have got the data
                // insert the data inside the iframe
                var iFrameDocument = element.contentDocument.body;
                if (iFrameDocument) {
                    var span = document.createElement('span');
                    //just dump all data inside iframe
                    span.innerText = JSON.stringify(data);
                    iFrameDocument.appendChild(span);
                }
            },
            error: function(error) {
                console.log(error.statusText);
            }
        });
    }
};

此外， View 中的绑定(bind)应更新为使用上述自定义绑定(bind)。

<iframe data-bind="ajaxIframe: source"></iframe>

另外，如果您想在每个请求中发送自定义 header ，请注意。你也可以这样做

$.ajaxSetup({
    headers: { 'x-custom-header': 'value' }
});