jQuery .load() 方法不适用于 CMS 文章

发布于 2024-12-10 11:02:33 字数 2337 浏览 0 评论 0 原文

我正在构建一个小部件,当用户将鼠标悬停在特定菜单选项上时,它会显示来自网站(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 w/ ID =“wifi”内的数据显示在我的“show”div中。当我将 JavaScript 更改为以下内容时:

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

我从上面链接到的图片中得到空响应。这是否只是 .load() 方法的限制,因为它无法解析 CMS 文章中的数据并且需要静态文件,或者我只是以错误的方式处理事情?

I am building a little widget that displays information from a different section of the site (Joomla) when users mouse over a particular menu option. Based on the behavior I am seeing, it seems to me like this method doesn't work w/ something like a CMS article because I keep getting an empty (see: http://cl.ly/1k3n151n3o0d1f2A1e3k) response.

The code below works great and does exactly what I want it to do when I reference a static file:

<!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>

As you would expect the data inside the div w/ ID="wifi" is displayed in my "show" div. When I change the JavaScript to the following:

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

I get the empty response from the picture I link to above. Is this just a limitation of the .load() method in the sense that it can't parse the data from a CMS article and needs a static file or am I just going about things in the wrong way?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

掩饰不了的爱 2024-12-17 11:02:33

您遇到了同源政策施加的限制。简而言之,禁止对不同域的 AJAX 调用,并且始终会失败。

您需要使用 JSONP (主要适用于 API 返回的数据)或 通过您自己的服务器/域代理请求

You're running into restrictions imposed by the Same Origin Policy. In short, AJAX calls to a different domain are prohibited and will always fail.

You need to either use JSONP (mostly applicable to data returned by APIs) or proxy the request through your own server/domain.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文