使用不同的GET参数动态加载图像 - Dynamically load image with different GET parameters

我试图用jQuery加载一个图像（用PHP创建），并传递一些变量（例如：picture.php?user=1&type=2&color=64）。这是容易的部分。

困难的部分是，我有一个下拉列表，可以选择背景（类型参数），我会有一个输入，例如选择颜色。

以下是我面临的问题：

如果下拉列表/输入没有被触摸，我想把它排除在URL之外
如果触摸了下拉列表/输入，我想将其包含在url中。（只需在预先存在的字符串中添加一个变量"&type=2"，就像我触摸下拉列表/输入几次它们就会叠加一样（&type=2&type=2&type=3），这是行不通的）
当将变量（"&type=2"-请参阅下面的代码）添加到预先存在的URL时，&amp-符号消失（变成这样："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版：

这是signaturalload.php 的代码

<?php
    $url = "signature.php?";
    $count = 0;
    foreach($_GET as $key => $value)
    {
        if($count > 0) $url .= "&";
        $url .= "{$key}={$value}";
    }
    echo "<img src='{$url}'></img>";
?>

如果我正确理解了你的问题，那么就可以找到一种使用JavaScript/jQuery修改当前URI的GET参数的正确方法，对吧？因为您指出的所有问题都来自于更改type参数的值。

这并不是微不足道的，尽管看起来如此，甚至还有JavaScript插件可以用于此工作。您可以使用这样的函数，并在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();
});

这里有一个变体，所有数据都保存在一个单独的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();

为什么不尝试将所选值存储在变量中，然后使用AJAX发布数据和加载图像。这样可以确保只有一个变量，而不是重复的变量。以下是示例

var type= 'default_value';
    $("#signature_type").change(function() {        
        type = $(this).val();
    });

然后使用ajax这样调用它（您可以在"更改"事件函数中这样做）：

$.ajax({
    type: 'GET',
    url:    'signatureload.php', 
    data: {
        user: <?php echo $_SESSION['sess_id']; ?>,
        type: type,
        ... put other variables here ...
    },
    success: function(answer){ 
        //load image to div here
    }
});

也许是这样的：

<script>
    var baseUrl = "signatureload.php?user=<?php echo $_SESSION['sess_id']; ?>";
    $(document).ready(function() {
        window.setTimeout(function(){
            LoadSignature(baseUrl);
        }, 1500);
    });
    $("#signature_type").change(function() {
        var urlWithSelectedType = baseUrl + "&type="+$(this).val();
        LoadSignature(urlWithSelectedType);
    });
    function LoadSignature(urlToLoad)
    {
        $("#loadingsignature").css("display", "block");
        $('#loadsignature').delay(4750).load(urlToLoad, function() {
            $("#loadingsignature").css("display", "none");
        });
    }
</script>