Fatal编程技术网
  • jquery/
  • Jquery $.Ajax返回数据-无法找到（）&插入特定的div内容 任务

Jquery $.Ajax返回数据-无法找到（）&插入特定的div内容 任务

jquery html ajax oop

Jquery $.Ajax返回数据-无法找到（）&插入特定的div内容 任务,jquery,html,ajax,oop,find,Jquery,Html,Ajax,Oop,Find,我的页面有3组“面板”，我打算从3个单独的页面通过AJAX获取html 我抓取的每个页面都有由数据id表示的div，它们对应于组中的面板 托管要注入的HTML的页面是完全限定的HTML页面，这样它们就有可能被机器人索引以获得良好的SEO，尽管我打算找到一些方法，通过mod_rewrite规则将任何流量重定向到实际的站点，这实际上是一个单页面站点 我构建了一个名为AjaxFetcher的类，目的是在第一次调用其fetch方法时，它将获取内容并将其存储在变量中。然后，如果再次调用，则可以只使用存储变

我的页面有3组“面板”，我打算从3个单独的页面通过AJAX获取html

我抓取的每个页面都有由数据id表示的div，它们对应于组中的面板

托管要注入的HTML的页面是完全限定的HTML页面，这样它们就有可能被机器人索引以获得良好的SEO，尽管我打算找到一些方法，通过mod_rewrite规则将任何流量重定向到实际的站点，这实际上是一个单页面站点

我构建了一个名为AjaxFetcher的类，目的是在第一次调用其fetch方法时，它将获取内容并将其存储在变量中。然后，如果再次调用，则可以只使用存储变量中的数据

ajax successresult方法将$result存储在this.fullContents中，然后在对象进程中调用第二个方法

在这个过程中，如果我只调用$'events.panel-1.overlycontent'.htmlthis.fullContents，我将获得插入面板的ajax请求返回的完整HTML

但是，我希望搜索返回的结果，并仅获取该面板的内容

问题 把结果 this.fullContents.find'[dataid='+mypanel'+]'；在html函数中，不插入任何内容

我也尝试过按id查找div，使用this.fullContents.contents我只检索了返回文档的正文，图像URL也没有中断，但是使用.find，我仍然无法获取特定的div

如果我console.log this.fullContent或this.fullContent.find的结果“[data id=”+panel+]”；，我得到[object object]，所以可能有东西被返回了

这个方法在过去对我来说很有效，尽管这是我第一次尝试将函数封装在一个我可以多次使用的类中，而不是一次。我情不自禁地感觉到课程中有一些基本的东西，或者我所缺少的范围

请记住，下面的代码尚未完成。ajax调用位于if语句re中：不再被调用，但尚未完成else部分

此外，html注入函数实际上应该看起来更像： this.section.find'[data id='+panel+']'.htmltoInject等

密码 我的ajax抓取类如下所示：

var cosy = cosy || {};

cosy.AjaxFetcher = function(options) {
    /*Options*/
    this.hasFetched = false;
    this.fullContents = null;
    this.section = $(options.section) || null;
    this.sectionName = options.section || null;
    this.toReturn = null;
    this.fetchUrl = 'content/' + options.section.replace("#", "") + '.html';
    console.log("url:" + this.fetchUrl);
}

cosy.AjaxFetcher.prototype = {
    init: function() {

    },
    fetch: function(panel) {
        var returnMe;
        var that = this;
        if (!this.hasFetched) {
            $.ajax({
                processData: true,
                async: false,
                type: 'GET',
                beforeSend: function() {

                },
                complete: function() {

                },
                error: function() {
                    /*manual page load*/
                    console.log("AJAX error");
                },
                success: function(result) {
                    console.log("ajax success");
                    that.fullContents = $(result);
                    that.hasFetched = true;
                    that.process(panel);
                },
                url: this.fetchUrl
            });
        } else {

        }
    },
    process: function(panel) {
        var toInject = this.fullContents.find('[data-id="'+panel+'"]');
        $('#events .panel-1 .overlayContent').html(toInject);
    }
}
我在我的主代码中当前将其称为：

var ajaxTest=new cosy.AjaxFetcher{section:'events'}； ajaxTest。获取“婚礼”

正在从中提取数据的页面，并记录了标记：

<body>
    <div class="introText">
        <h3>Events</h3>
        <p>From source of produce to presentation of plate we’re passionate about what we do and everything on our menus is produced here in our own kitchen.</p>
    </div>
    <div class="panel" data-id="weddings">
        <div class="scrollWrapper">
            <div class="imgWrapper">
                <img src="content/assets/events/fish.jpg">
            </div>
            <div class="contentCopyWrapper">
                <div class="contentCopy">
                    <h3 class="title">Weddings</h3>
                    <div class="copy"<p>Reception drinks, canapés and our Three Course Menu are the perfect choice for your celebration.</p>
                    <p>Whether a garden marquee or a stately home, Kitchen of Kent can take care of all your needs allowing you to enjoy your special day.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="panel" data-id="festivals">

    </div>
    <div class="panel" data-id="etcetcetc">

    </div>
    <div class="panel">

    </div>
    <div class="panel">

    </div>
    <div class="panel">

    </div>
</body>
这种代码需要重新思考。你已经做了很多工作来创建一个方便的类，你最后得到的是同步的Ajax调用，就像我在BEGGIN中所说的，它只是构建类的基础。该类似乎是在主代码之外存储功能并存储结果的一种明智的方式，以便可以再次访问它们&再次访问进一步的面板，并再次用于其他部分。顺便说一句，我想练习构建类，这是一个好主意，但您应该回报承诺并使用更多jQuery