Question

我正在构建一个小窗口小部件，当用户将鼠标悬停在特定菜单选项上时，该窗口小部件显示来自网站其他部分（Joomla）的信息。基于我所看到的行为，在我看来，这种方法不适用于CMS文章之类的东西，因为我不断得到一个空的（参见：http://cl.ly/1k3n151n3o0d1f2A1e3k）响应。

以下代码效果很好，并且在我引用静态文件时完全符合我的要求：

<!DOCTYPE html>
<html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="UTF-8">

  <title>Div/Scraping Testing</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script src="http://scripts.dri.edu/Other/modernizr.js"></script>
  <script type="text/javascript">
  $(document).ready(function()
  {
    $("#wifi").mouseover(function()
    {
      $("#show").load('wifi.php #wifi');
      $("#show").show();
    });
    $("#wifi").mouseout(function()
    {
      $("#show").hide();
    })
  });

  </script>

</head>
<body>
  <div id="container">
    <header>

    </header>

    <div id="main" role="main">
      <div id="nav">
        <center>
          <a href="wireless.php" id="wifi">WiFi</a> || <a href="#">Test</a>
        </center>
      </div>
      <div id="show" style="display:none;">
        <center><h3>Wireless Info.</h3></center>
      </div>
    </div>

    <footer>
    </footer>
  </div>
</body>
</html>

正如您所期望的那样，div = ID =“wifi”内的数据显示在我的“show”div中。当我将JavaScript更改为以下内容时：

  $("#show").load('http://cmsurl.com/is/is-network-access/22-wireless-access/ #wifi');

我从上面链接的图片中得到空的回复。这只是.load（）方法的限制，因为它无法解析CMS文章中的数据并需要静态文件，或者我只是以错误的方式处理事情？

Answer 1

您正遇到Same Origin Policy施加的限制。简而言之，AJAX对不同域的调用是被禁止的，并且总是会失败。

您需要使用JSONP（主要适用于API返回的数据）或proxy the request through your own server/domain。

jQuery .load（）方法无法使用CMS文章

1 个答案: