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

Question

我正在尝试使用jQuery加载一个图像(使用PHP创建)并使用它传递一些变量(例如:) picture.php?user=1&type=2&color=64.这很容易.

困难的部分是我有一个下拉列表,它使我能够选择背景(类型参数),我将有一个输入,例如选择一种颜色.

这是我面临的问题:

1. 如果没有触及下拉/输入,我想将其从URL中删除.
2. 如果触摸了下拉菜单/输入,我想将其包含在网址中.(这不会仅仅通过&type=2向预先存在的字符串添加变量" "来起作用,就像我触摸下拉/输入几次它们将堆叠(&type=2&type=2&type=3))一样.
3. 将变量(" &type=2" - 参见下面的代码)添加到预先存在的URL时,&-sign将消失(它变为如下所示:" 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>

EDIT2:

这是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 数组中

<script>
    var baseurl = "signatureload.php?user=<?php echo $_SESSION['sess_id']; ?>";
    var urlparams = {};

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

    $("#signature_type").change(function() {
        urlparams['type'] = $(this).val();

        LoadSignature();
    });

    function LoadSignature()
    {
        var gurl = baseurl; // there is always a ? so don't care about that.
        for (key in urlparams) {
            gurl += '&' + encodeURIComponent(key) + '=' + encodeURIComponent(urlparams[key]);
        }

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

使用此颜色或任何其他参数可以添加urlparams['color'] = $(this).val();