根据查询字符串替换 HTML？答案

【问题标题】：Replace HTML based on query string?根据查询字符串替换 HTML？
【发布时间】：2012-07-11 00:00:28
【问题描述】：

我一直在查看SO Post 以了解处理查询字符串。很高兴看到所有的回复。我想了解的是如何更进一步，其中提供的查询字符串实际上替换了 DOM 中的一个对象，例如特定的 DIV，并用另一个 DIV 替换它（可能隐藏在门外)，或者只是替换 DIV 中的内容。

我在网上查看了一些资源，但没有任何资源可以在 jsfiddle 中进行测试以使其正常工作。 Another post here sort of eludes to this.

目标

让一个简单的页面在正文中显示一个 DIV。加载页面时，会显示 DIV 和内容。使用 ?q=whatever 加载页面时，该 DIV 中的内容将替换为其他内容。

我的解决方案

为了有一个 DIV dissapea，这是第一个要解决的问题，基于一个查询字符串，我在我的页面上实现了这个：

if (strrpos($_SERVER['REQUEST_URI'], '/landingpage/index.php?q=1') === strlen($_SERVER['REQUEST_URI']) - strlen('/landingpage/index.php?q=1')) {
    $style = "display: none";
}
else {
    $style = "display: inline";
}

然后我把它放在我的 DIV 中：

<div id="theForm" style="<?php echo $style; ?>">
    //Form code here
</div>

如果存在查询字符串，这让我至少可以清除 DIV。

下一步，不是真正清除它，而是用一些内容替换它。

我在原来的 PHP 中添加了以下内容：

$thankYou = "<h1>Thank You for signing up</h1>";

在第一个 if 下，将 else 更改为 elseif 以捕获非查询字符串代码，未来可能还会出现更多情况。

所以最终的 PHP 代码如下所示：

if (strrpos($_SERVER['REQUEST_URI'], '/landingpage/index.php?q=1') === strlen($_SERVER['REQUEST_URI']) - strlen('/landingpage/index.php?q=1')) {
    $style = "display: none";
    $thankYou = "<h1>Thank You for signing up</h1>";
}
elseif (strrpos($_SERVER['REQUEST_URI'], '/landingpage/index.php') === strlen($_SERVER['REQUEST_URI']) - strlen('/landingpage/index.php')) {
    $style = "display: inline";
    $thankYou = "";
}

然后只需在将显示或隐藏的 DIV 之前从 $thankYou 变量中添加 PHP 回显，这对我来说就是这样。

【问题讨论】：

在编程中，将任务拆分为小的子任务并分别解决是个好主意。因此，将这个问题拆分为更小的问题并提出一个特定问题，这样它就不会看起来像“我有任务 - 为我做”
@zerkms 我觉得这真的是一个单一的问题，即如何根据查询字符串替换内容，但如果您觉得这更像是一项任务，请原谅我，那不是我的意图。
@JamesPoulson 我认为innerHTML 可能是一种添加一些数据作为替换手段的方法。那里的最后一个答案可能会有所启发。

标签： php javascript query-string

【解决方案1】：

这是一个可以帮助你的工作示例

http://www.fridgefilters.com/refrigerator-ice-and-water-filter-ukf8001.html?cust-title=welcome+stack+overflow

查看 JavaScript 了解详情

在主页上：

<script>writeCustomHeader('cust-title','customHeader')</script>

在附件mss.js中：

function returnQueryValue(match) {
    var query = location.search.substr(1);
    var pairs = query.split("&");
    for(i=0;i<pairs.length;i++){
        var name = pairs[i].split("=")[0];
        var val = pairs[i].split("=")[1];
        if(name==match){
            val = unescape(val.replace(/\+/g, " "));
            return val;
        }
    }
}

function writeCustomHeader(match,id) {
    var newHeader=returnQueryValue(match);
    if(!newHeader)return;
    var id = document.getElementById(id);
    var h1 = document.getElementsByTagName('h1')[0];
    if(newHeader.length>0 && id && id!='undefined'){
        id.innerHTML=newHeader
        h1.className=h1.className+" small";
        document.getElementById('customHeader').className="block";
    }
}

【讨论】：

嗯，希望不是变相的广告；）
JavaScript？什么javascript？该站点上有数十个脚本；这是哪个？（假设它不是php，我怀疑它是）。
我认为您参与的一些工作。如果脚本在外部文件中，您可以链接到它。
@BrianAdkins 我在他们的一个 JS 文件中看到，一些处理写入 CustomHeader 的代码，从外观上看，如果我能将这些点联系起来，这可能是我的盟友。现在做一些测试。
我找到了代码并添加到我上面的答案中（认为我得到了重要的部分）。请注意，这是“老派”的 JS ......并且可能使用 jQuery 更容易

【解决方案2】：

如何在 jQuery 中做到这一点。

下面解释如何替换innerHTML。

How to replace innerHTML of a div using jQuery?

这个问题解释了如何从当前 URL 获取参数值。

Get escaped URL parameter

最后，您还可以通过 Ajax 尤其是 jQuery.ajax() 方法从数据库中获取数据（例如创建动态页面）。

http://api.jquery.com/jQuery.ajax/

【讨论】：