1

セレクターのヘルプが必要です。Web ページの一部を 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

2 番目のアラートでは、「.contenu」に対してフィルタリングしています。これは、contenu というクラスを検索していることを意味します。ただし、HTML には ID "contenu" しかありません。簡単に言うと、 alert($(data).filter("#contenu").html()); この時点で期待する結果が得られるはずです。

于 2013-02-04T13:15:29.900 に答える