jQuery根据当前页面URL中的字符串加载远程页面元素

Question

我是Jquery的新手，我想拥有Jquery代码来获取当前页面的url，如果该URL包含某些字符串，则加载远程元素。

例：

我有这样的页面网址：

"http://......./Country/AU/result-search-to-buy"
"http://......./Country/CA/result-search-to-buy"
"http://......./Country/UK/result-search-to-buy"

我需要确定“ / Country / AU”部分，然后从“ /state-loader.html .state-AU”中加载“ AU”，如果从“ /state-loader.html .state-AU”中加载， “ /state-loader.html .state-CA”

我有一个内置模块“ {module_pageaddress} ”来获取当前页面URL的值，我只是不知道让它工作的Jquery逻辑。

我期望这样的事情：

if {module_pageaddress} contains "/Country/AU/" 
$('#MyDiv').load('state-loader.html .state-AU');

if {module_pageaddress} contains "/Country/CA/" 
$('#MyDiv').load('state-loader.html .state-CA');

请帮助，非常感谢。

Answer 1

这是一些代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery test page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function loadContent(elementSelector, sourceURL) {
            $(""+elementSelector+"").load(""+sourceURL+"");
        }
        function stateURL() {
            var startOfResult = '../../state-loader.html #state-';
            var match = (/(?:\/Country\/)(AU|US|CA|UK)(?:\/)/).exec(window.location.pathname);

            if (match) {
                return startOfResult + match[1];
            } else {
                return startOfResult + 'AU';
            }
        }
    </script>
</head>
<body>
<a href="javascript:loadContent('#content', stateURL())">Link 1</a>
<div id="content">content will be loaded here</div>
</body>
</html>

并为状态加载不同内容的文件：

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<div id="state-US">Go USA!</div>
<div id="state-CA">Go Canada!</div>
<div id="state-AU">Go Australia!</div>
<div id="state-UK">Go United Kingdom!</div>
</body>
</html>

看到它在这里工作：

http://www.quirkscode.com/flat/forumPosts/loadElementContents/Country/US/loadElementContents.html

将... / US / ...替换为... / AU / ...等，以查看其行为。

我收到想法/原始代码的原始帖子：

http://frinity.blogspot.com/2008/06/load-remote-content-into-div-element.html

Answer 2

你可以试试

var countryCode = ... // parse the country code from your module    
$('#yourDiv').load('state-loader.html .state-' + countryCode);

在此处查看.load（）的更多示例。

Answer 3

至于拉URL路径，您可以执行以下操作

var path_raw = document.location.path, 
     path_array = path_raw.split("/");

然后，您可以执行以下操作：

$.ajax({
     url: "./remote_data.php?country=" + path_array[0] + "&state=" + path_array[1],
     type: "GET",
     dataType: "JSON",
     cache: false,
     success: function(data){
          // update all your elements on the page with the data you just grabbed
     }
});

Answer 4

使用我的一行JavaScript函数来获取URL段的数组： http : //joshkoberstein.com/blog/2012/09/get-url-segments-with-javascript

然后，将变量$ countrySegment定义为国家/地区代码所在的段号。

例如：/ segment1 / segment2 / CA /

（国家代码应为第3段 ）

然后，检查是否设置了第三个数组索引，并且所述索引是“ CA”还是“ AU”。 如果是这样，请继续进行加载，将国家/地区代码段替换为.html文件名

function getSegments(){
    return location.pathname.split('/').filter(function(e){return e});
}

//set what segment the country code is in
$countrySegment = 3;

//get the segments
$segments = getSegments();

//check if segment is set
//and   if segment is either 'AU' or 'CA'
if(typeof $segments[$countrySegment-1] !==undefined && ($segments[$countrySegment-1] == 'AU' || $segments[$countrySegment-1] == 'CA')){
    $countryCode = $segments[$countrySegment-1];
    $('#target').load('state-loader.html .state-' + $countryCode);
}

Answer 5

var result= window.location.pathname.match(/\/Country\/([A-Z]+)\//);
if(result){
    $('#MyDiv').load('state-loader.html .state-' + result[1]);
}

jQuery根据当前页面URL中的字符串加载远程页面元素

问题描述

5 个解决方案

解决方案1
1 2012-09-26 02:06:00

解决方案2
0 2012-09-26 01:38:43

解决方案3
0 2012-09-26 01:39:08

解决方案4
0 2012-09-26 02:15:34

解决方案5
0 2012-09-26 02:17:00

jQuery根据当前页面URL中的字符串加载远程页面元素

问题描述

5 个解决方案

解决方案1 1 2012-09-26 02:06:00

解决方案2 0 2012-09-26 01:38:43

解决方案3 0 2012-09-26 01:39:08

解决方案4 0 2012-09-26 02:15:34

解决方案5 0 2012-09-26 02:17:00

解决方案1
1 2012-09-26 02:06:00

解决方案2
0 2012-09-26 01:38:43

解决方案3
0 2012-09-26 01:39:08

解决方案4
0 2012-09-26 02:15:34

解决方案5
0 2012-09-26 02:17:00