Сохраняйте html при фильтрации ответа jquery от .ajax

ProgramBox

Сохраняйте html при фильтрации ответа jquery от .ajax

Post author:admin
Запись опубликована:2 марта, 2023
Post category:Вопросы по программированию

#jquery #html #filter #response

#jquery #HTML #Фильтр #ответ

Вопрос:

Я вызываю страницу, которая возвращает такие данные, как:

 <div id="class">
    <option>Value</option>
    <option>Value</option>
</div>

<div id="type">
    <option>Value</option>
    <option>Value</option>
</div>

Я пытаюсь отфильтровать данные, чтобы я мог перебирать каждый из них и вставлять значения параметров в раскрывающийся список правильного раздела для них. Я даже расширил данные, чтобы я мог попробовать .find() на нем, и сделал его похожим:

 <div id="class">
    <div class="options">
        <option>Value</option>
        <option>Value</option>
    </div>
</div>

<div id="type">
    <div class="options">
        <option>Value</option>
        <option>Value</option>
    </div>
</div>

Однако он по-прежнему не работает. Я получаю только текстовый вывод, а не элементы html. Итак, мой вопрос в том, как мне сохранить фактические элементы html при использовании .команда filter()? Мой текущий код приведен ниже.

 $.ajax({  
    type: "POST", 
    url: "searchFunctions.php",
    data: dataString,
    success: function(data) {
        // Create jquery object from the response html
        var $response=$(data);

        // Change styles for children
        $response.filter('div').each(function(){
            $("#" $(this).attr("id")).html($(this).find(".options"));
        });
    }
});

Пожалуйста, обратите внимание, я пробовал .text() и .html() в конце $(this).find(«.options»), но безуспешно. Он по-прежнему возвращал только часть значения. Но это странно. Когда я использовал $(this).html() (no .find(«.options.»)), я мог видеть теги, но все еще не теги…

Заранее спасибо.

Да, никогда даже не думал о том, что браузер удалит теги опций из-за отсутствия тега выбора…

1. Как (почему?) Вы помещаете <option> теги внутри <div> тегов?

2. Я собираюсь предположить, что это может быть связано с тем, что a div не может содержаться option в допустимом HTML. Вы пробовали переносить параметры в a вместо a ? select div

3. Потому что у меня есть несколько выпадающих списков, и мне нужен был способ различать, какие параметры были для какого выпадающего списка. Затем фильтр анализирует возвращенные данные по тегам div, и для каждого идентификатора основных тегов div он знает, с каким выпадающим списком связаны параметры. Теги div и теги опций — это единственное, что выводится на странице, которую вызывает jquery.

4. @nrabinowitz Да, использование тегов <select> вместо тегов <div> сработало, и использование .html() Спасибо. Напишите ответ, и я пометлю его как правильный.

Ответ №1:

Рассматривали ли вы возможность возврата строки JSON, а не html-кода в вашем ответе ajax? Это упростило бы синтаксический анализ, а объем данных, отправляемых с сервера, был бы меньше.

Ответ JSON будет выглядеть следующим образом:

 '{"class":["option1", "option2"], "type": ["option1", "option2", "option3"]}'

Затем используйте метод parseJSON, чтобы перенести ваш ответ в объект. Рабочий пример см. в jsfiddle

1. Нет, но я не слишком хорошо знаю JSON. Пришлось использовать его только один раз в приложении для телефона. Хотя мне нужно изучить его лучше, я бы предпочел пока держаться от него подальше. Тем не менее, я ценю эту идею.

2. Хорошо, я бы обязательно изучил это. Я обновил ссылку jsfiddle в своем сообщении, чтобы показать, как поместить параметры в поля выбора. Для получения дополнительной информации о JSON ознакомьтесь json.org , его довольно легко освоить!

Ответ №2:

Это связано с тем, что div элемент не может содержать option элемент в допустимом HTML. Это сработает, если вы обернете параметры в select , а не в div :

 <select id="type">
    <option>Value</option>
    <option>Value</option>
</select>