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>

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

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 ポスト データとロード イメージを使用してみませんか。こうすることで、繰り返し変数ではなく、変数が 1 つだけになるようにします。ここに例があります

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

これは、すべてのデータが別の 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 に答える
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 に答える