我有一个T恤页面,用户需要选择颜色和尺寸(参见example here)
当用户点击颜色(带链接的图像)时,我需要填充“尺寸”下拉列表。
将用于填充以下内容的彩色图像/链接的代码:
<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
“&amp; stockcolor”是颜色代码的变量。其他2个变量必须保持不变
php页面将返回类似的内容:
[{"optionValue":2, "optionDisplay": "2"},{"optionValue":3, "optionDisplay": "3"},{"optionValue":4, "optionDisplay": "4"},{"optionValue":5, "optionDisplay": "5"},{"optionValue":6, "optionDisplay": "6"}]
我是AJAX的新手,我不知道如何在Tshirt页面上实现AJAX,使用颜色代码变量从php页面获取结果,然后将其填充到下拉框中,我需要帮助做到这一点
非常感谢!
答案 0 :(得分:1)
使php文件打印结果如
<option value="optionValue">optionResult</option>
<option>.......</option>
<option>.......</option>
将id =“stockcolor”添加到每个(a)元素并删除超链接并点击javascript,如:
<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)
}
});
});
});