使用jQuery $ .ajax，'GET'方法将XML显示为HTML - 仅适用于某些浏览器

时间：2014-01-26 18:20:25

标签： jquery ajax xml get

我正在尝试使用jQuery $.ajax 'GET'方法将XML文件中的数据作为HTML元素提取到网站中，但它目前仅适用于使用jquery-1.9.1.min的本地副本的两个浏览器。

这在Chrome和Firefox中运行得很好，但是在Opera，Safari和IE的所有版本中都没有任何结果。 Opera是唯一在控制台中返回错误的浏览器：

  

未捕获的异常：TypeError：无法将'n.innerHTML'转换为object。

功能：

$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: "content/pages.xml",
    crossDomain: true,
    dataType: "xml",
    success: function parseXml(xml){
      // find all page divs and load each into the main content area
      $(xml).find("page").each(function(){
        $("#contentArea").append($(this).find("mainPage").html());
      });
    }
  });
});

XML：

 <page>
    <mainPage>
        <div id="homePage" class="mainPage"><!-- columns incomplete -->
            <div id="homePage_txtpart_010" class="txtpart">
                <p id="homePage_txt_010">For those who are tired of spending tens of thousands of dollars to advertise on Live-Stream programming, only to receive minimal or ineffective exposure, StreamYourAd.com offers 
                a long overdue alternative to fruitless pre-roll ads. Take the guess work out of whether or not your ads reach your audience, and start paying less to attain more.</p>
                    <br />
                <p id="homePage_txt_020">When you partner with us, your ads...</p>
                <ul id="homePage_lst_010">
                    <li id="homePage_itm_010">Last longer</li>
                    <li id="homePage_itm_020">Cost less (less than a penny per view)</li>
                    <li id="homePage_itm_030">Can't be blocked, skipped or ignored</li>
                    <li id="homePage_itm_040">Reach a targeted, captivated audience</li>
                    <li id="homePage_itm_050">Reach mobile viewers</li>
                </ul>
            </div>
            <div id="homePageColumns">
                <div id="homePageColumn_010" class="homePageCol">
                    <h2 class="titles">Digital Branding</h2>
                    <p class="homePageColumns_txt">Embedded advertisements, logo blocks and digital PR.</p>
                </div>
                <div id="homePageColumn_020" class="homePageCol">
                    <h2 class="titles">Social Solutions</h2>
                    <p class="homePageColumns_txt">Facebook development, Twitter development, surveys and fan feedback.</p>
                </div>
                <div id="homePageColumn_030" class="homePageCol">
                    <h2 class="titles">Promotions and Endorsements</h2>
                    <p class="homePageColumns_txt">Product placement, streamer shout-outs, incentives and giveaways.</p>
                </div>
            </div>
        </div>
    </mainPage>
</page>

<page>
    <mainPage>
        <div id="aboutPage" class="mainPage">
            <div id="aboutPage_txtpart_010" class="txtpart">
                <p id="aboutPage_txt_010">StreamYourAd.com was created as an alternative to the stale forms of advertising currently offered in the Live-Streaming marketplace. Our goal is to get your message out to the masses.</p>
                <p id="aboutPage_txt_020">Commercials are often ignored, skipped and even blocked. However, our process directly connects streamers with advertisers and ensures delivery of your message to live-streaming audiences worldwide.</p>
                <p id="aboutPage_txt_030">Our ability to work with budgets big and small, create customizable service packages and employ streamers as advertisers makes working with StreamYourAd.com a partnership worth exploring.</p>
                <p id="aboutPage_txt_040">Check out our list of services and contact us to see how we will help you reach your target audience every time.</p>
            </div>
        </div>
    </mainPage>
</page>

<page>
    <mainPage>
        <div id="servicesPage" class="mainPage"><!-- includes four sub-pages; incomplete -->
            <div id="servicesPage_txtpart_010" class="txtpart">
                <p id="servicesPage_txt_010">services...</p>
            </div>
        </div>
    </mainPage>
</page>

<page>
    <mainPage>
        <div id="contactPage" class="mainPage"><!-- needs forms and more contextual info -->
            <div id="contactPage_txtpart_010" class="txtpart">
                <p id="contactPage_txt_010">If you are an advertiser that is interested in having our streamers promote your business, a streamer interested in joining our Stream Team, or for any other inquiries you may have, please contact us and leave us your comments.</p>
            </div>
        </div>
    </mainPage>
</page>

HTML：

            <div id="contentArea">
                <!-- populated by xml data on document ready -->
            </div>

我是否遗漏了某些内容或者我的语法是否已关闭？我通常不会以这种方式使用jQuery和XML，所以不要害怕将我的代码分开：）

2 个答案:

答案 0 :(得分：1)

我建议在你的xml中使用html作为cdata并使用.text() 同时删除crossDomain: true,，因为您的网址没有提出跨域请求。

$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: "content/pages.xml",
    dataType: "xml",
    success: function parseXml(xml){
      // find all page divs and load each into the main content area
      $(xml).find("page").each(function(){
        $("#contentArea").append($(this).find("mainPage").text());
      });
    }
  });
});

<page>
    <mainPage><![CDATA[
        <div id="aboutPage" class="mainPage">
            <div id="aboutPage_txtpart_010" class="txtpart">
                <p id="aboutPage_txt_010">StreamYourAd.com was created as an alternative to the stale forms of advertising currently offered in the Live-Streaming marketplace. Our goal is to get your message out to the masses.</p>
                <p id="aboutPage_txt_020">Commercials are often ignored, skipped and even blocked. However, our process directly connects streamers with advertisers and ensures delivery of your message to live-streaming audiences worldwide.</p>
                <p id="aboutPage_txt_030">Our ability to work with budgets big and small, create customizable service packages and employ streamers as advertisers makes working with StreamYourAd.com a partnership worth exploring.</p>
                <p id="aboutPage_txt_040">Check out our list of services and contact us to see how we will help you reach your target audience every time.</p>
            </div>
        </div>]]>
    </mainPage>
</page>

http://jsfiddle.net/mowglisanu/2mT8E/

答案 1 :(得分：0)

出现问题是因为当您调用innerHTML方法时，这些浏览器不支持XML数据的innerHTML属性（jQuery access .html()属性。）

以下是Opera蜻蜓工具的截图：

opera dragonfly screenshot

解决方法有点脏，但它有效：你必须替换

dataType: "xml",

与

dataType: "html",

不幸的是它在IE8和IE9中不起作用（但是如果删除crossDomain: true它在IE9中工作正常）

修改

还值得注意的是，所有page个节点都应该由pages.xml文件中的单个父节点包装

相关问题
最新问题