Желая загрузить изображение и текст для выбранного параметра в раскрывающемся списке с помощью Ajax

Question

Я не могу найти достойный пример этого нигде.

В основном есть раскрывающийся список, каждое значение параметра - productID, а текст - название продукта.

Я хочу опубликовать все выбранные значения параметров в методе действия, который вернет соответствующие изображения в готовом документе. Данные изображения будут переданы в функцию, которая будет обновлять DOM и затем выполнять ту же функцию каждый раз, когда выбирается другая опция из выпадающего списка, чтобы получить и изменить только выбранные опции / изображение продукта.

Метод действия вернет изображение для этой опции / значения клиенту в ответе AJAX, я также хочу вернуть описание продукта.

Должен ли тип данных ответа быть JSON или я должен возвращать его другим способом, т. Е. HTTP-ответ с изображением MIME-типа?

Что-то вроде ниже, собирает все выбранные значения в массиве:

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

Вы можете получить новые данные, используя событие изменения в поле выбора:

$(document).ready(function(){

    $('select').change(function(){

        $.ajax({
            type: "POST",
            url: "/System/GetProductImages",
            dataType: 'json',
            data: { 'id': $('select').selectedIndex.val() },
            traditional: true,
            success: function (data) { 
                mydata = data; 
                OnSuccess(data) // <--- The function that will load/update the images
            }
        });


    });

});

Кроме того, если вам удобнее работать с PHP, вы можете вывести результаты из PHP-скрипта и вызвать функцию загрузки при изменении опции select следующим образом:

/* JQuery code */

$(document).ready(function(){

    $('select').change(function(){

        $.load("/System/GetProductImages", function(){
         // The script to run when a successful load operation takes place
        });


    });

});

/* PHP Code */

echo "<script>$('tag name').html('value you want to set'); $('img').attr('src','new image src');</script>";

Хотя я не уверен, что вызов скрипта из PHP - лучшее решение. Следует также иметь в виду, что заголовок ответа Content-Type должен быть установлен в «application / json».

Если вы используете PHP, вы можете использовать функцию json_encode для возврата результата JSON. Вы можете прочитать больше о параметрах PHP JSON здесь - http://php.net/manual/en/function.json-encode.php

Надеюсь, это поможет.

Answer 2

Я бы сказал, что ваш ответ должен иметь JSON и Image ID (значение для идентификации вашего изображения из БД) и Product description. Затем с помощью этой конструкции создайте динамические элементы изображения в HTMl и установите для их тега src URL-адрес, передав этому параметру image ID, а на стороне сервера должен быть обработчик для вашего запроса (например, сервлет, который считывает идентификатор изображения и выбирает поток изображения и возвращается как ответ). Итак, браузер делает запрос для каждого изображения и отображает его в браузере. надеюсь, это поможет вам!