使用外部链接（使用 Jquery）自动加载页面 + ajax 调用

Question

当点击侧边栏中的链接时，我有一个页面会加载信息片段。

http://www.youarehere.im/other-financial-services.html

一切正常。

我也想从 index.html 文件链接到该页面，但要自动加载相关部分，而不是其默认状态。

因此，在主页上，“accounts”链接会加载“other-financial-services.html”并自动向服务器请求“accounts”链接的 ajax 调用。

有什么想法吗？我知道这个 Jquery sn-p 是完全错误的，但我对前端脚本非常陌生，而且我在黑暗中拍摄！

HTML：

<div class="box accounting"><h2><a id="service_accounts">Accounting</a></h2></div>

jQuery:

$(document).ready(function() {
    $.ajaxSetup({
        cache: false
    });

    var ajax_load = "<img src='img/load.gif' alt='loading...' />";
    var load_services = "other-financial-services.html";
    var accounts = "accounts.php";

    $('#service_accounts').click(function() {
        $.get(load_services).load(accounts);
    });
});

Answer 1

我认为你应该这样做：

<div class="box accounting"><h2><a id="service_accounts">Accounting</a></h2></div>
<div id='target'></div>

$('#service_accounts').click(function(){
    //load the html page int the div with id=target (of course is just an example)
    $('#target').load(load_services);
    $.get(accounts, function(data){
        //do something with data returned from the server
     });
});

Answer 2

如果我理解正确，您希望根据您打开页面的位置更改这些变量？

var load_services = "other-financial-services.html";
var accounts = "accounts.php";

这意味着您需要找到一种方法将参数传递到此页面，以便您可以在值之间切换。 不幸的是，我缺乏任何像样的 PHP 知识，但我认为应该可以添加

?ajaxloadselector=1 

到您的网址？

然后您可以在链接到此页面的页面中编辑 URL，并在此页面上进行切换，根据传递的 'ajaxloadselector' 参数填充变量。

Answer 3

在主页上，如果您想链接到“金融服务”页面的“会计”子菜单选项，请创建如下链接：

http://www.youarehere.im/other-financial-services.html#accounts

和js代码类似

var url = document.location.toString();
if (url.match('#')) { // the URL contains an anchor
  // click the navigation item corresponding to the anchor
  var anchor = '#' + url.split('#')[1];
  $('#load_' + anchor).click();
}

因此，每当您在 url 中加载带有 #<something> 的页面时，都会点击元素 #load_<something>

代码无耻地从http://blog.rebeccamurphey.com/2007/12/04/anchor-based-url-navigation-with-jquery 窃取（并修改）