javascript - 想要使用 Ajax 加载下拉列表中所选选项的图像和一些文本

Question

我在任何地方都找不到合适的例子。

基本上有一个下拉列表，每个选项值是productID，文本是产品名称。

我想将所有选定的选项值发布到一个操作方法，该方法将在文档就绪时返回相应的图像。图像数据将被传递到一个函数，该函数将更新 DOM，然后每次选择下拉列表中的不同选项时执行相同的函数，以仅检索和更改所选选项/产品图像。

操作方法将在 AJAX 响应中将此选项/值的图像返回给客户端，我也想返回产品描述。

响应数据类型应该是 JSON 还是我必须以其他方式返回它，即具有图像 MIME 类型的 HTTP 响应？

如下所示的内容会收集数组中的所有选定值:

$(document).ready(function () {
    var arr = new Array();
    $('select option').each(function () {
        arr.push($(this).val());
    });

    // This below will post it off:    
    $.ajax({
        type: "POST",
        url: "/System/GetProductImages",
        data: { arr: arr },
        traditional: true,
        success: function (data) { 
            mydata = data; 
            OnSuccess(data) // <--- The function that will load/update the images
        }, 
        dataType: "json" //<--- ?
    });
});

我不确定如何正确形成 AJAX 请求，以便我可以请求图像和一些文本，或者最好在需要不同的数据类型时进行单独的调用？也许我可以将它们全部打包到某种数组中？也不知道用检索到的图像更新 DOM 的函数会是什么样子。

Answer 1

我想说，您的响应应该是 JSON，其中包含图像 ID(用于从数据库中识别图像的值)和产品描述。然后使用该方法在 HTMl 中构造动态图像元素，并通过将该图像 ID 作为参数传递来将其 src 标记设置为 URL，并且在服务器端应该有一个用于处理您的请求的处理程序(就像 servlet 一样，它读取图像 ID 并获取图像流并作为响应返回)。因此，浏览器对每个图像发出请求并将其呈现在浏览器上。希望对您有帮助!