应该从其他网页加载内容的无响应AJAX代码

Question

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Collapse content</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="main.css">
<script>
$(function() {
    $( "#tabs" ).tabs({
     collapsible: true
   });
 });
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  $("#tabs-2").load("p2.html #content");
  </script>

</head>
<body>

<div id="tabs">
  <ul>
     <li><a href="#tabs-1">Alienware and Alpha</a></li>
     <li><a href="#tabs-2">More About</a></li>
     <li><a href="#tabs-3">Contact Us</a></li>
  </ul>
  <div id="tabs-1">
    <p><strong>Click this tab again to close the content pane.</strong>    </p>
    <p>Alienware is an American computer hardware subsidiary of Dell, Inc. Their products are designed for gaming purposes and are best known for their science-fiction-themed designs. Alienware was founded in 1996 by Nelson Gonzalez and Alex Aguila. Alienware Alpha is a line of PC-console hybrids introduced in 2014. It contains a custom-built Nvidia GeForce GTX 860M; a Core i3, i5, or i7 Intel Processor, depending on what model is purchased, up to 8 gigabytes of RAM; and between 500 gigabytes and 2 terabytes of hard drive space..</p>
  </div>
  <div id="tabs-2">
  </div>
.....(other ending tags, etc.)

我正在尝试从一个非常基本的网页加载内容，该网页只包含带有div标签#content的正文。 我希望它显示在我的选项卡2中。但这不会发生。 我不确定我在做什么错。

p2.html：Ajax标签2

<body>
<div id="content">

    <p>Established in 1996 by Nelson Gonzalez and Alex Aguila, Alienware assembles desktops, notebooks, workstations, and PC gaming consoles. According to employees, the name "Alienware" was chosen because of the founders' fondness for the hit television series The X-Files, with names such as Area-51, Hangar 18, and Aurora.</p>
    </div>
    </body>
</html>

Answer 1

编辑，更新

是的，在chrome浏览器上！

尝试使用/path/to/chrome --allow-file-access-from-files标志关闭chrome ，调整启动器或从终端启动。 请参阅如何使Google Chrome浏览器标志“ --allow-file-access-from-files”永久存在？ ，-- allow-file-access-from-files 。 另请参阅chrome://flags

$("#tabs-2")没有定义时.load()称为<script></script>含有$("#tabs-2").load("p2.html #content"); 在<head></head>元素内？

尝试移动$("#tabs-2").load("p2.html #content"); 在$(function() {})

  $(function() {
    $( "#tabs" ).tabs({
      collapsible: true
    });
    $( "#datepicker" ).datepicker();
    $("#tabs-2").load("p2.html #content");
  });

Answer 2

将此$（“＃tabs-2”）。load（“ p2.html #content”）放入$（function（）{}

$(function () {
  $("#tabs-2").load("p2.html #content")
});

完整的代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs - Collapse content</title> 
    <link rel="stylesheet"
    href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
    $(function () {
        $("#tabs").tabs();
        $("#tabs-2").load("p2.html #content");
    });
</script>
</head>
<body>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Alienware and Alpha</a></li>
        <li><a href="#tabs-2">More About</a></li>
        <li><a href="#tabs-3">Contact Us</a></li>
    </ul>
    <div id="tabs-1">
        Your Text!!!
    </div>
    <div id="tabs-2">
    </div>
    <div id="tabs-3">
    </div>
</div>
</body>
</html>

p2.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
   <div id="content">
    This is p2 page!!!
   </div>
</body>
</html>

应该从其他网页加载内容的无响应AJAX代码

问题描述

2 个解决方案

解决方案1
0 2015-10-24 03:50:20

解决方案2
0 2015-10-24 04:34:47

应该从其他网页加载内容的无响应AJAX代码

问题描述

2 个解决方案

解决方案1 0 2015-10-24 03:50:20

解决方案2 0 2015-10-24 04:34:47

解决方案1
0 2015-10-24 03:50:20

解决方案2
0 2015-10-24 04:34:47