0

ユーザーが色とサイズを選択する必要があるTシャツページがあります（ここの例を参照）

ユーザーが色（リンク付きの画像）をクリックしたときに、[サイズ]ドロップダウンにデータを入力する必要があります。

設定に使用されるカラー画像/リンクのコードは次のようになります。

<a  onclick="document.getElementById('productColor10474717').value='120';" class="colorlink" href="https://www.ni-dieu-ni-maitre.com/tshirt_image.php?a=10474717&color=120" target="tshirt_image">

（このリンクでは、カラーコードは120になります）

ドロップダウンに入力する必要のある結果を取得するために、すでにphpスクリプトを作成しました： https ：//ni-dieu-ni-maitre.com/_test/tshirt_ajax.php？checkshop = 266497＆checkproducttype = 210＆stockcolor = 2

「＆stockcolor」はカラーコードの変数です。他の2つの変数はそのままにしておく必要があります

phpページは次のようなものを返します：

[{"optionValue":2, "optionDisplay": "2"},{"optionValue":3, "optionDisplay": "3"},{"optionValue":4, "optionDisplay": "4"},{"optionValue":5, "optionDisplay": "5"},{"optionValue":6, "optionDisplay": "6"}]

私は本当にAJAXの初心者であり、TシャツページにAJAXを実装して、カラーコード変数を使用してphpページから結果を取得し、それをドロップダウンボックスに入力する方法がわかりません。それ

どうもありがとう！

4

1 に答える 1

1

phpファイルに次のような結果を出力させます

<option value="optionValue">optionResult</option>
<option>.......</option>
<option>.......</option>

各（a）要素にid = "stockcolor"を追加し、ハイパーリンクを削除して、次のようにJavaScriptをonclickします。

<a id="63" class="colorlink" href="#">
    <img src="https://image.spreadshirt.com/image-server/v1/appearances/63" width="24" height="24" class="cnormal">
</a>

jqueryをインストールします（この行をドキュメントの先頭に追加します）：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

次にajaxを使用します

$(document).ready(function(){
    $.ajax({
        type: "post",
        url: "Untitled-3.php?checkshop=266497&checkproducttype=210&stockcolor=" + $('#productColor10474717').val(),
        success: function(data){
            $('select#size').html(data);
    }
    });


    $('a.colorlink').click(function(){
    var stockcolor = $(this).attr('id'),
        checkshop = 266497,
        checkproducttype = 210;

    $.ajax({
        type: "post",
        url: "tshirt_ajax.php?checkshop=" + checkshop + "&checkproducttype=" + checkproducttype + "&stockcolor=" + stockcolor,
        beforeSend: function(){
            $('#productColor10474717').val(stockcolor);
        },
        success: function(data){
            $('select#size').html(data);
            $('#tshirt_image').attr('src', 'https://www.ni-dieu-ni-maitre.com/tshirt_image.php?a=10474717&color=' + stockcolor)
        }
    });

    });
});
于 2013-03-03T19:07:41.000 に答える