php - 使用不同的 GET 参数动态加载图像

Question

我正在尝试使用 jQuery 加载图像(使用 PHP 创建)并传递一些变量(例如:picture.php?user=1&type=2&color=64)。这是简单的部分。

困难的部分是我有一个下拉菜单，它使我能够选择背景(类型参数)并且我将有一个输入，例如选择一种颜色。

这是我面临的问题:

1. 如果没有触及下拉菜单/输入，我想将其从 URL 中删除。
2. 如果触摸了下拉菜单/输入，我想将其包含在 url 中。 (仅通过向预先存在的字符串添加变量“&type=2”是行不通的，就好像我多次触摸下拉菜单/输入它们会堆叠(&type=2&type =2&type=3)).
3. 将变量(“&type=2” - 请参阅下面的代码)添加到预先存在的 URL 时，&-符号消失(它变成这样:“signature. php?user=1type=2").

这是 jQuery 的代码:

<script>
    var url = "signatureload.php?user=<?php echo $_SESSION['sess_id']; ?>";

    $(document).ready(function() {
        window.setTimeout(LoadSignature, 1500);
    });

    $("#signature_type").change(function() {
        url += "&type="+$(this).val();

        LoadSignature();
    });

    function LoadSignature()
    {
        $("#loadingsignature").css("display", "block");
        $('#loadsignature').delay(4750).load(url, function() {
            $("#loadingsignature").css("display", "none");
        });
    }
</script>

这是我加载图像的代码:

<div id="loadsignature">
    <div id="loadingsignature" style="display: block;"><img src="img/loading-black.gif" alt="Loading.."></div>
</div>

我不知道如何进一步解释我的问题。如果您有任何疑问或需要更多代码，请告诉我。

感谢您的帮助!

编辑:

这是当前代码:

<script>
    var url = "signatureload.php?user=<?php echo $_SESSION['sess_id']; ?>";

    $(document).ready(function() {

        window.setTimeout(LoadSignature, 1500);

    });

    $("#signature_type").change(function() {
        url = updateQueryStringParameter(url, 'type', $(this).val());

        LoadSignature();
    });

    function LoadSignature()
    {
        $("#loadingsignature").css("display", "block");
        $('#loadsignature').delay(4750).load(url, function() {
            $("#loadingsignature").css("display", "none");
        });
    }

    function updateQueryStringParameter(uri, key, value)
    {
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"),
        separator = uri.indexOf('?') !== -1 ? "&" : "?",
        returnUri = '';

        if (uri.match(re))
        {
            returnUri = uri.replace(re, '$1' + key + "=" + value + '$2');
        }
        else
        {
            returnUri = uri + separator + key + "=" + value;
        }

        return returnUri;
    }
</script>

编辑 2:

这是 signatureload.php 的代码

<?php
    $url = "signature.php?";

    $count = 0;
    foreach($_GET as $key => $value)
    {
        if($count > 0) $url .= "&";
        $url .= "{$key}={$value}";
    }

    echo "<img src='{$url}'></img>";
?>

Answer 1

如果我正确理解了您的问题，那么归根结底就是找到使用 JavaScript/jQuery 修改当前 URI 的 GET 参数的正确方法，对吗？由于您指出的所有问题都来自更改 type 参数的值。

这并不像看起来那么简单，甚至还有用于这项工作的 JavaScript 插件。您可以使用类似 this 的函数在您的 signature_type 更改事件监听器中，

function updateQueryStringParameter(uri, key, value) {
    var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"),
        separator = uri.indexOf('?') !== -1 ? "&" : "?",
        returnUri = '';

    if (uri.match(re)) {
        returnUri = uri.replace(re, '$1' + key + "=" + value + '$2');
    } else {
        returnUri = uri + separator + key + "=" + value;
    }

    return returnUri;
}

$('#signature_type').change(function () {

    // Update the type param using said function
    url = updateQueryStringParameter(url, 'type', $(this).val());

    LoadSignature();
});