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

时间:2013-08-26 17:36:05

标签: php jquery html

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

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

以下是我遇到的问题:

  1. 如果没有触及下拉/输入,我想将其从URL中删除。
  2. 如果触摸了下拉/输入,我想将其包含在网址中。 (这不会只是将一个变量“&type=2”添加到预先存在的字符串中,就好像我会多次触摸下拉/输入一样(&type=2&type=2&type=3))。
  3. 将变量(“&type=2” - 请参阅下面的代码)添加到预先存在的网址时,&amp; -sign将消失(它变为如下所示:“signature.php?user=1type=2”)。< / LI>

    以下是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>";
    ?>
    

4 个答案:

答案 0 :(得分:2)

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

这看起来并非微不足道,甚至还有针对这项工作的JavaScript插件。您可以在signature_type更改事件侦听器

中使用this之类的函数
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();
});

答案 1 :(得分: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
    }
});

答案 2 :(得分: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>

答案 3 :(得分: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();