jquery ajax done无法访问返回的对象属性

时间:2015-09-18 04:05:41

标签: javascript jquery ajax

解决!

解决方案: 将绑定到回调

this.loadVideo(this.reloadVideo.bind(this));

我正在解决jquery的奇怪行为。

我有对象,返回ajax响应的方法在哪里。问题是,我无法访问返回的对象属性。

当我尝试访问返回的对象数据时:

console.log(this.actualVideoData.htmlContent);
TypeError: undefined is not an object (evaluating 'this.actualVideoData.htmlContent')

您有什么想法,为什么我无法访问 this.actualVideoData.htmlContent ?感谢您的回复。

jQuery方法对象,正在处理它:

var VideoControls = function () {

    this.loadVideoUrl = window.loadVideoUrl;
    this.mainVideoWrapp = $('#main-video-wrapp');
    this.actualVideoData;
    this.actualVideoId;

    if (!(this instanceof VideoControls)) {
        return new VideoControls();
    }

};
VideoControls.prototype = {
        reloadVideo: function(data){
            console.log(this);
            console.log(this.actualVideoData.htmlContent);
            //this.mainVideoWrapp.html(this.actualVideoData.htmlContent);
        },
        changeVideo: function (videoId) {
            this.actualVideoId = videoId;
            this.loadVideo(this.reloadVideo());
        }, loadVideo: function (callback) {
            var self = this;
            if (typeof this.loadVideoUrl !== 'undefined') {

                var postData = {
                    video_id: this.actualVideoId,
                    _token: getCsrfToken()
                };

                $.ajax({
                    type: 'POST',
                    url: this.loadVideoUrl,
                    data: postData
                }).done(function (data) {
                    self.actualVideoData = data.video;
                    if (typeof callback === 'function') {
                        callback()
                    }

                });
            }
        }
    };

这是我得到的,当我调用console.log(data);

Object
video: Object
htmlContent: "<article id="video">↵    <div class="r-iframe-wrapp">↵        <iframe width="900" height="506" src="https://www.youtube.com/embed/cHUT25erCas" frameborder="0" allowfullscreen></iframe>↵    </div>↵    <header>↵        <a href="#" class="title"><h1>Ben Cristovao &amp; Cavalier - Tezky Vahy [Prod. Jan Sokolowski ] Gladiator Treninkova Hymna</h1></a>↵        <div><span class="show-full-description collapse-toggle toggle" data-toggle="collapse" data-target="#video-description">Zobrazit celý popis videa</span></div>↵        <div id="video-description" class="video-desc collapse opened">↵            <div class="video-sub-header clearfix">↵                <div class="left">↵                    Publikoval: <strong>Ben Cristovao</strong> 19. 10. 2014 v 19:01↵                </div>↵                <div class="right video-visits-counter">↵                                    </div>↵            </div>↵            <div class="desc-text">↵                Barbaři: https://www.facebook.com/thebarbarianlife↵Cavalier: https://www.facebook.com/cavaliercz↵Negr: https://www.facebook.com/cristovao.ben↵Producent: https://www.facebook.com/sokolowski.jan↵↵            </div>↵        </div>↵    </header>↵</article>"
videoId: "1"
__proto__: Object
__proto__: Object

这是我得到的,当我调用console.log(JSON.stringify(data));

[Log] {"video":{"htmlContent":"<article id=\"video\">\n    <div class=\"r-iframe-wrapp\">\n        <iframe width=\"900\" height=\"506\" src=\"https://www.youtube.com/embed/cHUT25erCas\" frameborder=\"0\" allowfullscreen></iframe>\n    </div>\n    <header>\n        <a href=\"#\" class=\"title\"><h1>Ben Cristovao &amp; Cavalier - Tezky Vahy [Prod. Jan Sokolowski ] Gladiator Treninkova Hymna</h1></a>\n        <div><span class=\"show-full-description collapse-toggle toggle\" data-toggle=\"collapse\" data-target=\"#video-description\">Zobrazit celý popis videa</span></div>\n        <div id=\"video-description\" class=\"video-desc collapse opened\">\n            <div class=\"video-sub-header clearfix\">\n                <div class=\"left\">\n                    Publikoval: <strong>Ben Cristovao</strong> 19. 10. 2014 v 19:01\n                </div>\n                <div class=\"right video-visits-counter\">\n                                    </div>\n            </div>\n            <div class=\"desc-text\">\n                Barbaři: https://www.facebook.com/thebarbarianlife\nCavalier: https://www.facebook.com/cavaliercz\nNegr: https://www.facebook.com/cristovao.ben\nProducent: https://www.facebook.com/sokolowski.jan\n\n            </div>\n        </div>\n    </header>\n</article>","videoId":"1"}}

对此的回应:

console.log(this);
console.log(this.htmlContent);
console.log($(this).actualVideoData.htmlContent);

是:

Object
actualVideoId: "1"
loadVideoUrl: "http://favideo.inovestudio.com/ajax/video/load"
mainVideoWrapp: Object[1]
__proto__: Object

undefined

TypeError: undefined is not an object (evaluating '$(this).actualVideoData.htmlContent')

这是一种奇怪的行为。另外 - 我在$ .ajax.done中尝试console.log(data),在调用回调之前它并没有登录到控制台。所以我认为,函数reloadVideo在self.actualVideoData = data.video完成之前调用或者像这样调用。

其他奇怪的事情:当我在

中拨打console.log(this)
reloadVideo

方法,它返回窗口对象

另外 - 当我这样做: .done()中的 console.log(data.video.htmlContent)时,它可以正常工作。因此,问题可能是在 reloadVideo 方法中访问。但我不知道,为什么。

0 个答案:

没有答案