Как я могу манипулировать ответом Ajax до того, как он введен в DOM?

Вот что у меня так далеко:

$(function () {
    dataValModify('body');

    $('body').bind('ajaxSuccess', function (e, xhr, settings) {
        dataValModify(xhr.responseText);
    });
});

function dataValModify(elem) {
    // Code to modify elements within the response.
}

Как я могу взять ответ Ajax и изменить его, прежде чем он будет введен в DOM? Раньше я был обязательным ajaxComplete и изменение DOM непосредственно после инъекции, но я бы хотел изменить ответ. Я не думаю, что имеет смысл искать элементы в ответе Ajax и использовать их для изменения DOM. Я отправляю xhr.responseText в мою функцию, чтобы я не применил изменения к остальной части тела, которые уже были изменены к моменту вызова Ajax. Кроме того, есть что-то лучше, чем xhr.responseText использовать для этого? Я не мог получить xhr.responseHTML работать.

РЕДАКТИРОВАТЬ: Прямо сейчас я просто использую простой тестовый вызов Ajax, чтобы вернуть частичное представление MVC:

$('#ajaxTest').load('<MVC Route>')
Источник

2 ответа

Решение

Если я правильно понимаю ваши требования, они следующие:

  • Сделайте асинхронный HTTP-запрос, чтобы получить HTML
  • Модифицируйте возвращенный HTML с помощью функции dataValModify()
  • Вставьте измененный HTML в ваш элемент с идентификатором: "ajaxTest"

Если это так, то для меня это звучит так, как будто вам нужно сделать ajax-вызов более низкого уровня, чем тот, который вы используете в настоящее время $(elem).load()

По сути, призыв к .load() это обертка для $.get() с последующим вызовом $(elem).html(someContent) где "someContent" - это текст ответа из HTTP-запроса.

Поэтому, если вы хотите изменить ответ до его внедрения в DOM, вы можете сделать что-то похожее на следующее:

$.ajax({
  type: "GET",
  url: "<MVC Route>",
  dataType: "html", 
  success: function(jqXHR, textStatus, errorThrown){

    // Your HTTP call was successful but nothing else has happened with the response yet
    // Therefore you can now do whatever you want with the it...

    // First modify the HTML using the dataValModify function
    // Assumption being that your function returns the modified HTML string
    var myModifiedHTML = dataValModify(jqXHR.responseText);

    // Inject the modified HTML
    $('#ajaxTest').html(myModifiedHTML);
  }
});
Источник

Ты можешь использовать ajaxComplete изменить responseHTML сам.

$('body').ajaxComplete(function(e, xhr, settings) {
      dataValModify(xhr.responseHTML);
});

Обновление: я не пробовал, но это может помочь:

$.ajaxSetup({
  converters: {
    "text html": function( textValue ) {
      if ( valid( textValue ) ) {
        // Some parsing logic here
        return dataValModify(textValue );
      } else {
        // This will notify a parsererror for current request
        throw exceptionObject;
      }
    }
  }
});

Более подробная информация здесь: http://api.jquery.com/extending-ajax/

Источник
Другие вопросы по тегам