Tự động tải hình ảnh với các thông số GET khác nhau

Question

Tôi đang cố gắng tải một hình ảnh (được tạo bằng PHP) với jQuery và chuyển một vài biến với nó (ví dụ: picture.php?user=1&type=2&color=64). Đó là phần dễ dàng.

Phần khó là tôi đã thả xuống cho phép tôi chọn nền (tham số kiểu) và tôi sẽ có đầu vào ví dụ để chọn màu.

Here're những vấn đề tôi đang phải đối mặt:

1. Nếu một dropdown/input đã không được xúc động, tôi muốn rời bỏ nó ra khỏi URL.
2. Nếu một menu thả xuống/đầu vào đã được chạm vào, tôi muốn đưa nó vào url. (Điều này sẽ không hoạt động bằng cách thêm một biến "&type=2" vào chuỗi đã tồn tại từ trước như thể tôi chạm vào menu thả xuống/nhập nhiều lần chúng sẽ chồng lên nhau (&type=2&type=2&type=3)).
3. Khi thêm biến ("&type=2" - xem mã bên dưới) vào URL đã tồn tại trước, mã & biến mất (nó trở thành như sau: "signature.php?user=1type=2").

Dưới đây là các mã cho 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> 

Dưới đây là đoạn code mà tôi tải hình ảnh:

<div id="loadsignature"> 
    <div id="loadingsignature" style="display: block;"><img src="img/loading-black.gif" alt="Loading.."></div> 
</div> 

Tôi không biết làm thế nào hơn nữa hơn tôi có thể giải thích vấn đề của tôi. Nếu bạn có bất kỳ nghi ngờ nào hoặc cần thêm mã, vui lòng cho tôi biết.

Cảm ơn sự giúp đỡ của bạn!

EDIT:

Dưới đây là các mã hiện tại:

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

Dưới đây là các mã cho 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

đây là một biến thể trong đó tất cả dữ liệu là keept trong một mảng javascript riêng biệt

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

Với màu này hoặc bất kỳ thông số nào khác có thể được thêm vào với urlparams['color'] = $(this).val();

Answer 2

Nếu tôi under tood câu hỏi của bạn một cách chính xác, nó đi xuống để tìm một cách thích hợp của việc sửa đổi các tham số GET của URI hiện tại bằng cách sử dụng JavaScript/jQuery, phải không? Như tất cả các vấn đề bạn chỉ ra đến từ việc thay đổi giá trị của thông số type.

Đây không phải là tầm thường như nó có vẻ mặc dù, thậm chí còn có bổ trợ JavaScript cho công việc này. Bạn có thể sử dụng một chức năng như this và trong signature_type sự kiện thay đổi người nghe của bạn,

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

Tại sao bạn không thử lưu trữ giá trị được lựa chọn của bạn trong một biến, và sau đó sử dụng dữ liệu bài AJAX và hình ảnh tải. Bằng cách đó bạn đảm bảo chỉ có một biến, không phải là một biến.Dưới đây là ví dụ

var type= 'default_value'; 

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

sau đó sử dụng ajax gọi nó như thế này (bạn có thể làm điều này trong "thay đổi" chức năng sự kiện của bạn):

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

Có lẽ một cái gì đó như thế này:

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