應該從其他網頁加載內容的無響應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