Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/68.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jQuery$.ajax()查找方法_Javascript_Jquery_Ajax - Fatal编程技术网

Javascript jQuery$.ajax()查找方法

Javascript jQuery$.ajax()查找方法,javascript,jquery,ajax,Javascript,Jquery,Ajax,我很难将从服务器返回的数据传递到代码中的正确元素,尽管我可以在开发人员工具中看到响应,find似乎返回了正确的选择器。示例来自《找到我的JavaScript文件》一书: $('nav a').on('click',function(e){ e.preventDefault() var url = this.href var $content = $('#content') $('nav a.current').removeClass('current') $(this).addClass('cu

我很难将从服务器返回的数据传递到代码中的正确元素,尽管我可以在开发人员工具中看到响应,
find
似乎返回了正确的选择器。示例来自《找到我的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>')
    }
  })
})
$('nava')。在('click',函数(e){
e、 预防默认值()
var url=this.href
var$content=$(“#content”)
$('nav a.current')。removeClass('current'))
$(this.addClass('current'))
$(“#容器”).remove()
$.ajax({
键入:“获取”,
url:url,
超时时间:2000,
beforeSend:function(){
$content.append('加载')
},
完成:函数(){
$('#加载')。删除()
},
成功:功能(数据){
$content.html($(数据).find('#容器')).hide().fadeIn(500)
console.log($(data.find('#container'))//返回的对象
},
错误:函数(){
$content.html('请重试')
}
})
})
主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>

jQuery&;Ajax$.Ajax()方法
演示
十五吨的乐趣!
滚起来!滚起来!全体上车,乘坐神奇的创客巴士。明年8月,我们将从西海岸前往东海岸,乘坐我们的复古莱兰巴士,分享创客乐趣

驾驶我们的JavaScript控制的四架直升机,当你和鸟儿一起飞翔时,从上面拍摄位置。或者,如果你喜欢呆在地面上,输入maker jam

今年制造商大会的主题是旅游的未来。我们将用arduinos、面包板、控制器、二极管、雕刻机、文件把我们的总线堆得很高。。。今天进入

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>

公共汽车在这里停。
加利福尼亚州旧金山5月1日

德克萨斯州奥斯汀5月15日

纽约州纽约市
5月30日

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

修补匠、制造者、焊料、苍蝇。
我们迫不及待地想给我们忠实的巴士巴尼装上我们在路上带过的最广泛的玩具

今年我们将带来15名队员、50公里长的电缆、50块与arduino兼容的主板、25台笔记本电脑、20台平板电脑、10部手机、5套四旋翼直升机套件,以及一台绑在屋顶上的巨型激光器,这些数据令人印象深刻

我们还带来了一个大车顶,它将提供一整夜的遮蔽,还将主持来自众多嘉宾演讲者的演讲和演示。

是的,我们说过我们在车顶上绑了一个巨大的激光装置。让我们看看这次我们多久会因为超速而被拦下一次

我们的新发电机非常笨重,我们必须用专用拖车牵引它,但这是值得的,因为我们正在为比以往任何时候都更大的项目提供动力,我们希望你整夜都在修补我们24小时的制造商堵塞

我们最先进的3D打印机可以帮助您将自己的纪念品带回家!唯一的问题是你必须设计它们。我们将把每一个都添加到我们的开源3D设计库中,最好的设计师将保留打印机

我不想问,但这让我感到困惑,我知道这很简单。谢谢

J.

方法
.find()
在子元素中搜索匹配项,在您的情况下,您搜索的是层次结构的顶部,因此没有匹配项。如果您的元素是顶级的,您不需要做任何事情来访问它,当然,除非您不需要其他顶级数据。在这种情况下,您可以使用
.filter()


您是否尝试过
$(数据).find(#container”).html()
?-换句话说,从返回的对象获取HTML并将其设置到父容器中否则,
console.log(数据)的输出是什么
console.log(data)
返回了片段。
0038A.html
是一个完整的网页还是仅仅显示了片段?仅仅是片段,我以前在一个类似的例子中做过这件事,是不是搞错了?我刚刚想出来:我需要用
id='content'
将片段包装在另一个元素中。我应该删除这个问题吗?谢谢!我只是说我发现我需要另一个元素,我不知道
find
是如何工作的,现在我知道了。我会认为你的答案是正确的。您能为JavaScript/jQuery API推荐一个规范的源代码吗?对于jQuery,可能是JavaScript
$content.html(data).hide().fadeIn(500)