阅读url并显示正确的结果

Question

有人能帮我处理这段代码吗。

现在它是这样运作的。

如果url是

www.example.com/dc.html?dc=apples

然后显示

"I like Apples"

当url是

www.example.com/dc-Apples.html

意味着如果HTML url包含apple，那么它应该显示

"I like Apples"

这是我现在的代码。..........................................................................................................................

 <style>
    .dynamic-content {
    display:none;
}
</style>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    // Parse the URL parameter
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    // Give the parameter a variable name
    var dynamicContent = getParameterByName('dc');

     $(document).ready(function() {

        // Check if the URL parameter is apples
        if (dynamicContent == 'apples') {
            $('#apples').show();
        } 
        // Check if the URL parameter is oranges
        else if (dynamicContent == 'oranges') {
            $('#oranges').show();
        } 
        // Check if the URL parameter is bananas
        else if (dynamicContent == 'bananas') {
            $('#bananas').show();
        } 
        // Check if the URL parmeter is empty or not defined, display default content
        else {
            $('#default-content').show();
        }
    });
</script>
<!-- Default Dynamic Section -->
<div id="default-content" class="dynamic-content">
  This is the default content
</div>
<!-- Dynamic Section 1 -->
<div id="apples" class="dynamic-content">
  I like apples
</div>
<!-- Dynamic Section 2 -->
<div id="oranges" class="dynamic-content">
  I like oranges
</div>
<!-- Dynamic Section 3 -->
<div id="bananas" class="dynamic-content">
  I like bananas
</div>

Answer 1

当浏览器向服务器请求www.example.com/dc-Apples.html URL时，服务器将查找dc-Apples.html文件。因此，您需要创建dc-Apples.html文件。因为您的URL是动态的，所以不可能只使用jQuery来处理动态URL。

为了处理动态URL，您需要使用服务器端代码，如.php、asp.net、.htaccess。

下面我用.htaccess和.php来解决你的问题。

在.htaccess中

RewriteEngine on
RewriteRule ^([A-Za-z0-9-]+).html dc.php?dc=$1 [NC,L]

在dc.php中

<?php
    if(isset($_GET['dc'])){
        $dc_value = explode("-",$_GET['dc']);
        $dc_value[1] = strtolower($dc_value[1]);
    }else{
        echo "can't get parameter";
        die();
    }
?>

<?php if($dc_value[1] == "apples"): ?>
    <div id="apples" class="dynamic-content">
        I like apples
    </div>
<?php elseif($dc_value[1] == "oranges"): ?>
    <div id="oranges" class="dynamic-content">
        I like oranges
    </div>
<?php elseif($dc_value[1] == "bananas"): ?>
    <div id="bananas" class="dynamic-content">
        I like bananas
    </div>
<?php else: ?>
    <div id="default-content" class="dynamic-content">
        This is the default content
    </div>
<?php endif; ?>

现在它起作用了，当你调用www.example.com/dc-Apples.html时，它会显示“我喜欢苹果”

Answer 2

最好的解决方案这里，您也可以根据这个解决方案检查这个答案，您必须使用已实现的函数获得参数值，并做任何您想做的事情。