繁体   English   中英

使用ajax / jquery将html页面内容(需要jquery脚本支持)加载到div中

[英]Load html page content(require jquery scripting support) into a div using ajax/jquery

我是这里的新用户,我想通知大家有关我的问题的详细搜索,但发现的解决方案并不完美。

这是我的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org  /TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>R A</title>
  <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css"
  />
   <script type="text/javascript" src="script/jquery-1.10.2.min.js"></script>
   <script type="text/javascript" src="script/jquery-migrate-1.2.1.min.js"></script>
   <script type="text/javascript" src="script/accord.js"></script>
   <script type="text/javascript" src="script/jquery.nivo.slider.js"></script>
   <script>
 $(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random',
        directionNavHide: false,
        pauseOnHover: true,
        captionOpacity: 1,
        prevText: '<',
        nextText: '>'
    });
});
   </script>
  <script type="text/javascript" src="script/loadcontent.js"></script>

  </head>

  <body>

 <div id="wrapper">
 <div id="header">
    <img class="headright" src="images/leaf-Rt.gif" width="48" height="50" alt="#">
    <img class="headright" src="images/pine-cone-Rt.gif" width="58"       
    height="50"           alt="#">
    <img class="headleft" src="images/leaf-Lt.gif" width="48" height="50" alt="#">
    <img class="headleft" src="images/pine-cone-Lt.gif" width="58" height="50" alt="#">
    <h1><i>R F I</i></h1>
    <h2><i>XYZ</i></h2>
</div>


   <ul id="menu">
<li><a id="link1" href"#">Home</a></li>
<li>
    <a href="#">Products</a>
    <ul>
        <li>
            <a href="#">Agarbatti</a>
            <ul>
                <li><a href='#'>Raw</a></li>
                <li><a href='#'>Scented</a></li>
                <li><a href='#'>Flora</a></li>
            </ul>               
        </li>
        <li>
            <a href="#">Dhoop</a>
            <ul>
                 <li><a href='#'>Soft / Wet</a></li>
                 <li><a href='#'>Sticks</a></li>
                 <li><a href='#'>Cone</a></li>
                 <li><a href='#'>Sambrani</a></li>
            </ul>               
        </li>


   <li>
            <a href='#'>Loban</a>
  <ul>
     <li><a href='#'>Powder</a></li>
     <li><a href='#'>Hard</a></li>
   </ul>
   </li>
   <li><a href='#'>Candles</a>
    <ul>
     <li><a href='#'>Rose Candles</a></li>
     <li><a href='#'>Decorative Candles</a></li>
     <li><a href='#'>Royal Candles</a></li>
     <li><a href='#'>Heart Candles</a></li>
     <li><a href='#'>Orchid Candles</a></li>
     <li><a href='#'>Floating Candles</a></li>
     <li><a href='#'>Ball Candles</a></li>
     <li><a href='#'>Christmas Candles</a></li>
     <li><a href='#'>Pillar Candles</a></li>
     <li><a href='#'>Gourmet Candles</a></li> 
    </ul>
   </li>
   <li ><a href='#'>Stands</a>
    <ul>
      <li><a href='#'>Agarbatti / Incense</a></li>
      <li><a href='#'>Loban Stands</a></li>
      <li><a href='#'>Dhoops Stands</a></li>
      <li><a href='#'>Candle Stands</a></li>
     </ul>
  </li>
  <li ><a href='#'>Puja Items</a>
  <ul>
     <li><a href='#'>Camphor</a></li>
     <li><a href='#'>Cow's Ghee</a></li>
     <li><a href='#'>Rumal/Chundari</a></li>
     <li><a href='#'>Mukut</a></li>
     <li><a href='#'>Mala</a></li>
     <li><a href='#'>Hawan Samagri</a></li>
     <li><a href='#'>Cotton</a></li>
     <li><a href='#'>Janva</a></li>
     <li><a href='#'>Gau Mutr</a></li> 
    </ul>
  </li>
  <li ><a href='#'>Mehndi</a></li>
  <li ><a href='#'>Napthelene Balls</a></li>
  <li ><a href='#'>Perfumes & Attars</a></li>        
  </ul>

  </li>
<li><a href="#">Testimonials</a></li>

<li>
    <a href="#">About</a>   
</li>
<li>
    <a href="#">Contact</a> 
</li>
   <li>
    <a href="#">Trade Enquiry</a>   
</li>
  </ul>


    <div id="outer">
    <div class="inner">            
    <div id="main" align="center">


    </div><!--end main-->
    <div id="left">

    <div id='cssmenu' style="top:2px">
    <ul>
    <li class='active'><a href='index.html'><span>Home</span></a></li>
    <li class='has-sub'><a href='#'><span>Incense Sticks</span></a>
    <ul>
     <li><a href='#'><span>Raw</span></a></li>
     <li><a href='#'><span>Scented</span></a></li>
     <li class='last'><a href='#'><span>Flora</span></a></li>
    </ul>
    </li>
    <li class='has-sub'><a href='#'><span>Dhoop</span></a>
    <ul>
     <li><a href='#'><span>Soft / Wet</span></a></li>
     <li><a href='#'><span>Sticks</span></a></li>
     <li><a href='#'><span>Cone</span></a></li>
     <li class='last'><a href='#'><span>Sambrani</span></a></li>
    </ul>
     </li>
    <li class='has-sub'><a href='#'><span>Loban</span></a>
    <ul>
     <li><a href='#'><span>Powder</span></a></li>
     <li class='last'><a href='#'><span>Hard</span></a></li>
     </ul>
    </li>
    <li class='has-sub'><a href='#'><span>Candles</span></a>
    <ul>
     <li><a href='#'><span>Rose Candles</span></a></li>
     <li><a href='#'><span>Decorative Candles</span></a></li>
     <li><a href='#'><span>Royal Candles</span></a></li>
     <li><a href='#'><span>Heart Candles</span></a></li>
     <li><a href='#'><span>Orchid Candles</span></a></li>
     <li><a href='#'><span>Floating Candles</span></a></li>
     <li><a href='#'><span>Ball Candles</span></a></li>
     <li><a href='#'><span>Christmas Candles</span></a></li>
     <li><a href='#'><span>Pillar Candles</span></a></li>
     <li class='last'><a href='#'><span>Gourmet Candles</span></a></li> 
     </ul>
     </li>
     <li class='has-sub'><a href='#'><span>Stands</span></a>
     <ul>
     <li><a href='#'><span>Agarbatti / Incense</span></a></li>
     <li><a href='#'><span>Loban Stands</span></a></li>
     <li><a href='#'><span>Dhoops Stands</span></a></li>
     <li class='last'><a href='#'><span>Candle Stands</span></a></li>
    </ul>
    </li>
    <li class='has-sub'><a href='#'><span>Puja Items</span></a>
    <ul>
     <li><a href='#'><span>Camphor</span></a></li>
     <li><a href='#'><span>Cow's Ghee</span></a></li>
     <li><a href='#'><span>Rumal/Chundari</span></a></li>
     <li><a href='#'><span>Mukut</span></a></li>
     <li><a href='#'><span>Mala</span></a></li>
     <li><a href='#'><span>Hawan Samagri</span></a></li>
     <li><a href='#'><span>Cotton</span></a></li>
     <li><a href='#'><span>Janva</span></a></li>
     <li class='last'><a href='#'><span>Gau Mutr</span></a></li> 
    </ul>
    </li>
    <li class='last'><a href='#'><span>Mehndi</span></a></li>
    <li class='last'><a href='#'><span>Napthelene Balls</span></a></li>
    <li class='last'><a href='#'><span>Air Freshner</span></a></li>
    <li class='last'><a href='#'><span>Perfumes & Attars</span></a></li>
    </ul>
    </div>

    </div><!--end left-->
    <div class="clearer"></div>
    </div><!--end inner-->


    <div class="clearer"></div>

    </div><!--end outer-->

    <div id="footer" >
    <!-- <div class="iconleft">
        <a href="http://validator.w3.org/check?uri=referer"><img src="images/html-
     blue.png" alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
    </div>
    <div class="iconright">
        <a href="http://jigsaw.w3.org/css-validator/"><img src="images/css-blue.png" 
     alt="Valid CSS!" height="31" width="88"></a>
    </div>-->
    <p style="text-align:center;color:#FFF"> Copyright &#169;2013</p>  
    </div><!--end footer-->

    </div><!--end wrapper-->

   <div id="bodyfooter"></div>
   </div>

   </body>
   </html>

现在我要在这里做的是,当我单击ID为“#link1”的主页菜单时,我的主页div即“ #main”应加载外部html文件home.html

home.html

    <br /><br />
       <div class="slider-wrapper futurico-theme" >

    <div id="slider" class="nivoSlider">

        <img src="image/slideshow/cycleall.jpg" alt="">

        <img src="image/slideshow/All-in-1.jpg" alt="">

        <img src="image/slideshow/ECO.jpg" alt="">

        <img src="image/slideshow/Fairy-Tale.jpg" alt="">

        <img src="image/slideshow/Heritage.jpg" alt="" />

        <img src="image/slideshow/honey.jpg" />

        <img src="image/slideshow/incense.jpg" />

        <img src="image/slideshow/Moods.jpg" />

        <img src="image/slideshow/Morning.jpg" />

        <img src="image/slideshow/Natya.jpg" />

        <img src="image/slideshow/Prestige.jpg" />

        <img src="image/slideshow/Sandalum.jpg" />

        <img src="image/slideshow/Three.jpg" />

        <img src="image/slideshow/wood.jpg" />


    </div>

    <div id="caption1" class="nivo-html-caption">
        <strong>New Project</strong> <span></span> <em>Some description   
        here</em>.
    </div>

    <div id="caption3" class="nivo-html-caption">
        <strong>Image 3</strong> <span></span> <em>Some description 
       here</em>.
    </div>

  </div>
     <br /><br />
    <script type="text/javascript" src="script/jquery.nivo.slider.js"></script>
   <script>
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random',
        directionNavHide: false,
        pauseOnHover: true,
        captionOpacity: 1,
        prevText: '<',
        nextText: '>'
    });
    });
    </script>

我使用了以下代码,但是它带我到了新页面,而不是将页面加载到“ #main” div中。

   jQuery(document).ready(function(){
   $('#link1').on('click', 'a', function(e){ //step 1
   e.preventDefault(); //prevent default action, step2
   var url = url("content/home.html"); //get the url, step 2

   $.ajax({ //step 3
   type: 'GET',
     url: url,
  //your other options
   success: function(data){ //on success
    $('#main').html(data); //update your div, step 4
     }
     });
    });
  });

以前,我尝试过以下代码,该代码可以工作,但Jquery脚本不起作用

    $(document).ready(function () {
      $(document).on('click', '#link1', function (e) {
      $('#main').load("content/home.html");
      e.preventDefault();
     });
    });

这就是我得到的

http://i40.tinypic.com/2nsncs4.jpg

这就是我想要的

http://i42.tinypic.com/tapoaa.jpg

请帮助我,我被震惊了。 谢谢。

错的地方:

  • 您在#link1上绑定事件的方式应该是$(container).on(event, target, function)
  • url应该是字符串,我不明白什么是url("url.html")

尝试这个:

$(document).ready(function () {
    $(document).on('click', '#link1', function (e) {
        var url = "content/home.html";

        e.preventDefault();

        $.ajax({
            type : 'GET',
            url : url,
            //your other options
            success : function (data) {
                $('#main').html(data);
            }
        });
    });
});

或者改为在$.ajax() ,您可以像这样简单地执行$.load()

$(document).ready(function () {
    $(document).on('click', '#link1', function (e) {
        $('#main').load("content/home.html");
        e.preventDefault();
    });
});

您不需要整个$ .ajax请求内容,就可以直接使用查询中的.load方法

$( "#main" ).load( "our external url" );

jqyery文档

但是,如果您的外部url中有完整的html页面,则整个页面都将加载到#main元素中。 这意味着重复的html,body等标记。 我想这不是您期望的结果。

如果您只想加载远程/外部页面的特定部分,请在.load方法内使用内容选择器

$( "#main" ).load( "ajax/test.html #container" );

因此,您将只将具有容器ID的元素的内容从外部页面加载到#main元素中。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM