5

我正在尝试使用 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>";
?>
4

4 回答 4

2

如果我正确理解了您的问题，那么归结为找到使用 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();
});
于 2013-08-26T17:50:49.683 回答
1

您为什么不尝试将您选择的值存储在一个变量中，然后使用 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
    }
});
于 2013-08-26T17:55:51.777 回答
1

也许是这样的：

<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>
于 2013-08-26T19:07:54.967 回答
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();

于 2013-08-27T21:38:07.727 回答