Обновите несколько div-ов из jQuery ajax html response

Question

У меня есть страница в корзине покупок asp.net mvc, которая позволяет вам ввести купон и показывает сводку заказа вместе с другим содержимым страницы. Я хотел бы иметь кнопку Обновить, которая будет проверять код купона, сообщать о любых ошибках, а также обновлять сводку заказов на странице через jQuery ajax.

Я знаю, что мог бы сделать это путем создания формы и частичного просмотра и использовать свойство target в отправке jQuery. Тем не менее, подумал, что я мог бы сделать что-то вроде следующего:

var options
{
  success: function (responseHtml) // contains the entire form in the response
  {
    // extract sub-sections from responseHtml and update accordingly

    // update <div id="coupon"> with coupon div from responseHtml
    // update <div id="order-summary> with order summary div from responseHtml
  }   
}
$('#my-form').ajaxSubmit(options); // submits the entire form

Преимущество здесь в том, что мне не придется выполнять полное обновление страницы или создавать частичное представление, содержащее все области, которые необходимо обновить. Есть ли подходящий способ сделать это через jQuery ajax?

Answer 1

Возможно, более чистое решение, чем Ответ Джеймса Скидмора , хотя идея та же:

var $holder = $('<div/>').html(responseHtml);
$('#coupon').html($('#coupon', $holder).html());
$('#order-summary').html($('#order-summary', $holder).html());

Answer 2

Плагин jQuery taconite был создан для подобных сценариев. Это прозрачный плагин, который перехватывает ответы ajax. Например, если ваше приложение восстанавливает следующий XML:

<taconite> 
    <replace select="#promotion"> 
        <div>Thank you for your order!</div> 
    </replace> 

    <remove select="#emptyMsg, .preOrder" /> 

    <append select="#cartTable tbody"> 
        <tr><td>1</td><td>Dozen Red Roses</td><td>$18.99</td></tr> 
    </append> 

    <replaceContent select="#cartTotal"> 
        $18.99 
    </replaceContent> 
</taconite> 

Это будет:

• Заменить "продвижение" div на сообщение "Спасибо"
• Удалите строку "emptyMsg" из корзины покупок и удалите все элементы с классом "preOrder"
• Добавить в корзину строку с количеством, описанием и суммой заказа
• Обновите элемент cartTotal, добавив в него новую корзину

(пример взят с сайта Taconite)

Answer 3

Если я правильно вас понял, ответ сервера будет включать HTML-страницу, из которой вы хотите извлечь определенные элементы и соответствующим образом обновить соответствующие элементы текущей страницы.

Возможно, есть лучшие способы сделать это, но вот что приходит на ум. Также обязательно переключите упомянутые идентификаторы на классы:

// In your success function shown in your question:
if ($('#ajaxResponse').length > 0)
{
  $('#ajaxResponse').remove(); // Remove previous AJAX response if it exists
}
$('body').append('<div id="ajaxResponse" style="display: none;">'+responseHtml+'</div>');
$('.coupon:first').html($('#ajaxResponse .coupon').html());
$('.order-summary:first').html($('#ajaxResponse .order-summary').html());

Answer 4

Вы можете сделать это за один вызов, получив целую html-страницу в качестве ответа с помощью методов ajax (), get () или post () и разделив ее на части для раздачи в функции обратного вызова success, или если вы хотите сделать это для каждого фрагмента страницы, который вы хотите обновить отдельно, вы можете использовать метод load () jQuery .