weixin_33681778 2018-04-15 22:30 采纳率: 0%
浏览 37

jQuery $ .ajax()查找方法

I'm having difficulty passing the data returned from the server to the correct element in my code, although I can see the response in the developer tools and find seems to return the correct selector. The example is from the book found here. My JavaScript file:

$('nav a').on('click',function(e){
e.preventDefault()
var url = this.href
var $content = $('#content')
$('nav a.current').removeClass('current')
$(this).addClass('current')
$('#container').remove()

$.ajax({
    type: "GET",
    url: url,
    timeout: 2000,
    beforeSend: function(){
        $content.append('<div id="load">Loading</div>')
    },
    complete: function(){
        $('#load').remove()
    },
    success: function(data){
        $content.html($(data).find('#container')).hide().fadeIn(500)
        console.log($(data).find('#container')) // Object returned

    },
    error: function(){
        $content.html('<div id="container">Please try again</div>')
    }
  })
})

The main HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery &amp; Ajax $.ajax() Method</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/c08.css">
</head>
<body>
    <header>
        <h1>DEMO</h1>
        <nav>
            <a href="0038.html" class="current">HOME</a>
            <a href="0038A.html">ROUTE</a>
            <a href="0038B.html">TOYS</a>

        </nav>
    </header>
    <section id="content" style="display: block;">
      <div id="container">
        <h2>Fifteen tons of fun!</h2>
        <div class="third">
          <img src="img/home1.jpg" alt="Quadcopter" />
          <p>Roll up! Roll up! All aboard, for the magical maker bus ride. Next August, we're heading from the west coast to east coast, sharing the maker fun as we travel in our vintage Leyland bus.</p>
        </div>
        <div class="third">
          <img src="img/home2.jpg" alt="Circuit boards" />
          <p>Fly our JavaScript controlled quadcopters, filming the location from above as you soar with the birds. Or, if you prefer to stay on the ground, enter the maker jam.</p>
        </div>
        <div class="third">
          <img src="img/home3.jpg" alt="Wheely thing" />
          <p>The theme of this year's maker-jams is the future of travel. We'll be piling our bus high with arduinos, breadboards, controllers, diodes, engravers, files... Enter today.</p>
        </div>
      </div>
    </section>
    <script type="text/javascript" src="js/0038.js"></script>
  </body>
</html>

The fragment for 0038A.html:

  <div id="container" class="location">
    <h2>The bus stops here.</h2>

    <div class="event">
      <img src="img/map-ca.png" alt="Map of San Francisco" />
      <p><b>SAN FRANCISCO, CA</b><br />May 1</p>
    </div>
    <div class="event">
      <img src="img/map-tx.png" alt="Map of Texas" />
      <p><b>AUSTIN, TX</b><br />May 15</p>
    </div>
    <div class="event">
      <img src="img/map-ny.png" alt="Map of New York" />
      <p><b>NEW YORK, NY</b><br />May 30</p>
    </div>

  </div>

And the fragment for 0038B.html

  <div id="container">
    <h2>Tinker, maker, solder, fly.</h2>

    <div class="third intro">
      <p>We can't wait to load up Barney, our faithful bus, with the widest range of toys we've ever taken on the road... </p><p>This year sees some impressive stats as we will be bringing 15 team members, 50km of cable, 50 arduino compatible boards, 25 laptops, 20 tablets, 10 mobile phones, 5 quadcopter kits, and a giant laser strapped to the roof. </p><p>We're also bringing a big top, which will provide shelter throughout the night as well as hosting talks and demonstrations from an impressive range of guest speakers.</p><p>And yes, we did say that we have a giant laser strapped to the roof of the bus. Let's see how often we get stopped for speeding this time!</p>
    </div>
    <div class="third">
      <img src="img/toys1.jpg" alt="Circuit boards" />
      <p>Our new generator is so hefty we have to tow it on a dedicated trailer, but that's worth it because we're powering bigger projects than ever and we expect you to be tinkering throughout the night with our 24-hour maker-jams.</p>
    </div>
    <div class="third">
      <img src="img/toys2.jpg" alt="Circuit boards" />
      <p>Our state of the art 3D printer is ready to help you take your own souvenirs home! The only catch is that you have to design them. We'll add each one to our open-source 3D designs library, and the designer of the best one gets to keep the printer.</p>
    </div>

  </div>

I wouldn't ask, but this has me stumped, and I know it's something simple. Thanks.

J.

  • 写回答

1条回答

      报告相同问题?

      相关推荐 更多相似问题

      悬赏问题

      • ¥15 macOS使用IDEA 2022.2.4打包JDK6项目报错
      • ¥20 OpenCV-Python简单轮廓寻找
      • ¥20 使用matlab进行含参数的最优化求解及数值模拟
      • ¥20 MATLAB找出一维变量中的局部极大值和局部极小值,并进行运算
      • ¥15 有Chang求三维杆单元几何非线性分析matlab代码
      • ¥50 使用unity easyar录屏功能。录屏视频整体色调很暗
      • ¥50 pyinstaller 打包问题
      • ¥15 无法使用cnssc调取网页数据
      • ¥15 Pycharm安装en_core_web_sm失败出现Could not find a version that satisfies the requirement spacy报错
      • ¥15 Python社区划分