个人中心
gpt4 book ai didi

javascript - jQuery $.ajax() 查找方法

转载 作者：行者123 更新时间：2023-12-03 02:04:45 26 4
gpt4 key购买 nike

尽管我可以在开发者工具中看到响应并find 似乎，但我很难将从服务器返回的数据传递到代码中的正确元素返回正确的选择器。该示例来自书籍 here.我的 JavaScript 文件:

$('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>')
    }
  })
})

主要 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>

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>

以及 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>

我不会问，但这让我很困惑，而且我知道这很简单。谢谢。

J.

最佳答案

.find() 方法在后代元素中搜索匹配项，在您的情况下，您要搜索的内容位于层次结构的顶部，因此您不会得到匹配项。如果您的元素位于顶层，则无需执行任何操作即可访问它，当然，除非存在您不需要的其他顶层数据。在这种情况下，您可以使用 .filter()

$content.html(data).hide().fadeIn(500)

关于javascript - jQuery $.ajax() 查找方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49847408/

26 4 0
文章推荐： excel - 当 Word 未打开时，从 Excel 模板创建 Word 文档
文章推荐： mongodb - Elasticsearch Rivers-如何用河指数制作正态指数？
文章推荐： excel - 插入文本框并设置公式
文章推荐： elasticsearch - 基于字段的动态映射Elasticsearch
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com