1

我需要选择器方面的帮助。我想用 Ajax 和 jquery 加载网页的一部分。

这是我的 Ajax 代码

$(document).ready(function(){                       
$(".equipe").click(function(event){
    event.preventDefault();                                 
    var page = null;                    
    page=($(this).attr("href"));                    
    $.ajax({                     
        url: page,                    
        cache: false,                                           
        success: function(data) {   
            alert(data);            
            var $response=$(data);
            alert($(data).filter(".contenu").html());
            $("#contenu").empty();                          
            $("#contenu").append($response.filter('.contenu').html());          
            Cufon.refresh();                    
        }                   
    });             
});

});

第一个警报窗口给了我所有

这是我的 HTML

<!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" />
<meta name="author" content="A6tance informatique" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Salon Reviens</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

 <!-- Style sheets -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/960.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->

<!-- jQuery framework and plugins -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>

<!-- Font replacement (Cufon) -->
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/GeosansLight_500.font.js"></script>
<script type="text/javascript" src="js/myriad_400.font.js"></script>

<!-- custom.js contains rules for many parts of the site (sliders, portfolio, etc.) -->
<script type="text/javascript" src="js/custom.js"></script>
<!--Superfish -->
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<!-- IE6 PNG transparency fix -->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>       
<script type="text/javascript">DD_belatedPNG.fix('img,.sf-menu,.shadow-bg,.portfolio-sections,.thumb,.nav-left-corner,.side li a,.nav-right-corner,.piecemakerframe,.button-1,.button-2,.inquire-button,.search,.sf-menu li li,.partners li a,.email a,.phone a,.www a,.copyright,.search-box'); /* Add more CSS rules for elements you add if you need a png fix for them */</script>      
<![endif]-->
</head>
<body class="content">
<div class="container_12"> 
    <!-- LOGO -->
    <div class="logo-container">
        <a href="#" title="">
            <img src="images/logo.png" width="214px" height="143px" alt="logo Salon Reviens" style="margin-top:-15px;"/>
        </a>
    </div>
  <!-- /logo-container --> 
  <!-- NAVIGATION -->
  <div class="navigation-wrap" style="top:-20px;">
    <div class="nav-right-corner"></div>
    <ul class="sf-menu">
      <li class="current_page_item"><a href="index.html">Accueil</a></li>
      <li><a href="equipe.html">L'Équipe</a></li>
      <li><a href="#">Services</a></li>
      <li> <a href="#">Produits</a></li>
      <li> <a href="#">Contact</a> </li>
    </ul>
    <div class="nav-left-corner"></div>
  </div>
  <!-- /NAVIGATION -->
  <div class="clear"></div>
  <!-- CONTENT -->
  <div class="grid_12 mar-top"> &nbsp;</div>
  <!-- end .grid_12 -->
  <div class="grid_4">
    <h1>L'Équipe</h1>
  </div>
  <!-- end .grid_4 -->
  <div class="grid_8">
    <h2 class="tag"> Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis.</h2>
    <br />
    <br />
  </div>
  <!-- end .grid_8 -->
  <div class="clear"></div>
  <div class="grid_12"> <img src="images/shadow-footer-bg.png" width="927" height="47" alt="Shadow" /></div>
  <!-- end .grid_12 -->
  <div class="grid_4 sidebar">
    <h4>Les coiffeuses</h4>
    <ul class="side">
      <li><a class="equipe" href="sylvieGarand.html">Sylvie Garand</a></li>
      <li><a class="equipe" href="karine.html">Karine</a></li>
      <li><a class="equipe" href="nathalie.html">Nathalie</a></li>
      <li><a class="equipe" href="nathalieGervais.html">Nathalie Gervais</a></li>
      <li><a class="equipe" href="cindyLessard.html">Cindy Lessard</a></li>
      <li><a class="equipe" href="melanieLambert.html">Mélanie Lambert</a></li>
      <li><a class="equipe" href="sylvieLebeau.html">Sylvie Lebeau</a></li>
      <li><a class="equipe" href="chantalBeland.html">Chantal Béland</a></li>
      <li><a class="equipe" href="marie-claudeDupuis.html">Marie-Claude Dupuis</a></li>
    </ul>
  </div>
  <!-- end .grid_4 -->
  <div class="grid_8">
    <div id="contenu">
      <div style="float:right; background-color:black; width:200px; height:300px;"></div>
      <h3>Coiffeuse propriétaire du Salon Reviens</h3>
      <p>En tant qu’employeur, j’offre la possibilité à mon équipe de maintenir leurs compétences à jours en leur proposant de suivre des formations de pointe dans le domaine de la coiffure, tant au Québec qu’à l’extérieur du pays.</p>
      <h3>Plus de 25 ans d'expérience</h3>
      <p>Comme coiffeuse pour hommes, je suis constamment à l’écoute des besoins de la clientèle afin d’offrir les produits et services qui lui convient.</p>
      <p>Femme d’affaire active dans le milieu, je contribue au développement économique et social de la région en soutenant divers organismes locaux.</p>
      <p style="text-align:center;">Merci de choisir Salon Reviens depuis 26ans!</p>
    </div>
  </div>
  <!-- end .grid_8 -->
  <div class="clear"></div>
  <div class="grid_12 shadow-bg"></div>
  <!-- end .grid_12 -->
  <div class="grid_12">
    <h3>titre</h3>
    <p>Nam fermentum pellentesque vehicula. Maecenas nec quam felis. Curabitur sed enim eu augue placerat cursus. Cras semper vulputate odio, at vestibulum ante viverra eget. Suspendisse at condimentum quam. Curabitur non lectus sit amet velit dignissim varius. Praesent at rutrum mauris. Integer congue enim ut diam pretium venenatis. Phasellus eu lacus neque, sed gravida mauris. Mauris tincidunt, ligula at feugiat gravida, enim magna lacinia purus, faucibus venenatis eros leo id urna. Morbi non risus neque, ut lacinia risus.</p>
    <br />
  </div>
  <!-- end .grid_12 -->
  <div class="clear"></div>
</div>
<!-- /container_12 -->
<div class="clear"></div>
<!-- FOOTER -->
<div class="footer_bg">
  <div class="container_12">
    <div class="grid_6"> <img src="images/shadow-divider-2.png" width="19" height="207" alt="Divider" class="vr-divider"/>
      <div class="news">
        <h4><a href="http://maps.google.ca/maps?f=q&amp;source=embed&amp;hl=fr&amp;geocode=&amp;q=550+Bd+St+Laurent+E+Louiseville,+QC++J5V+2R5&amp;sll=46.257039,-72.926653&amp;sspn=0.01175,0.026822&amp;ie=UTF8&amp;hq=&amp;hnear=550+Boulevard+Saint+Laurent+Est,+Louiseville,+Qu%C3%A9bec+J5V+2T3&amp;t=m&amp;ll=46.257568,-72.927246&amp;spn=0.014836,0.03768&amp;z=14&amp;iwloc=A" target="_blank">Nous trouver</a></h4>
        <iframe width="400" height="150" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ca/maps?f=q&amp;source=s_q&amp;hl=fr&amp;geocode=&amp;q=550+Bd+St+Laurent+E+Louiseville,+QC++J5V+2R5&amp;sll=46.257039,-72.926653&amp;sspn=0.01175,0.026822&amp;ie=UTF8&amp;hq=&amp;hnear=550+Boulevard+Saint+Laurent+Est,+Louiseville,+Qu%C3%A9bec+J5V+2T3&amp;t=m&amp;ll=46.257568,-72.927246&amp;spn=0.014836,0.03768&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
      </div>
      <!-- /news --> </div>
    <!-- end .grid_6 -->
    <div class="grid_3"> <img src="images/shadow-divider-2.png" width="19" height="207" alt="Divider" class="vr-divider"/>
      <h4>Horaires</h4>
      <ul class="partners">
        <li><a href="#">Lundi à Mercredi: 9H~17H</a></li>
        <li><a href="#">Jeudi à Vendredi: 9H~21H</a></li>
        <li><a href="#">Samedi: 8H~15H</a></li>
        <li><a href="#">Dimanche: Fermé</a></li>
      </ul>
    </div>
    <!-- end .grid_3 -->
    <div class="grid_3 omega">
      <h4>Pour nous contacter</h4>
      <ul class="contact-info">
        <li class="phone"><a href="#">(819) 228-9933</a></li>
        <li class="email"><a href="#">info@salonreviens.com</a></li>
        <li class="www"><a href="#">www.salonreviens.com</a></li>
      </ul>
    </div>
    <!-- end .grid_3 -->
    <div class="clear"></div>
    <div class="copyright">
      <p>Salon Reviens &copy; 2012 <a href="http://www.a6tance.com">A6tance informatique</a> &bull; Tous Droits Réservés </p>
    </div>
    <!-- /copyright --> </div>
  <!-- /container_12 --> </div>
<!-- /footer_bg -->
</body>
</html>

我要加载的页面与此页面完全相同。所以我应该找到#contenu。

4

1 回答 1

0

在您的第二个警报中，您正在过滤“.contenu”，这意味着您正在搜索一个名为 contenu 的类。然而，在您的 HTML 中只有一个 ID“contenu”。简而言之，alert($(data).filter("#contenu").html()); 应该给你你在这一点上所期望的结果。

于 2013-02-04T13:15:29.900 回答