Динамически загружать изображение с разными параметрами GET

Question

Я пытаюсь загрузить изображение (созданное с помощью PHP) с помощью jQuery и передавая ему несколько переменных (например: picture.php?user=1&type=2&color=64). Это легкая часть.

Жесткая часть состоит в том, что у меня есть выпадающий список, который позволяет мне выбирать фон (параметр типа), и у меня будет вход, например, для выбора цвета.

Here're проблемы я столкнулся:

1. Если выпадающий/вход не трогали, я хочу, чтобы оставить его из URL.
2. Если вы выбрали выпадающий список/вход, я хочу включить его в URL-адрес. (Это не сработает, просто добавив переменную «&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> 

Я не знаю, как еще дальше, я мог объясните мою проблему. Если у вас есть какие-либо сомнения или требуется больше кода, пожалуйста, дайте мне знать.

Благодарим за помощь!

EDIT:

Вот текущий код:

<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();

Answer 2

Если Unders I правильно ли вы правильно задаете свой вопрос, все сводится к поиску правильного способа изменения параметров GET текущего URI с помощью JavaScript/jQuery, правильно? Поскольку все проблемы, о которых вы указываете, связаны с изменением значения параметра .

Это не тривиально, как может показаться, есть даже плагины 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(); 
}); 

Answer 3

Почему бы вам не попробовать хранении выбранное значение в переменной, а затем с помощью 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 
    } 
}); 

Answer 4

Может быть что-то вроде этого:

<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>