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

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

1 голос
/ 12 августа 2011

Вот что у меня есть: 

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

2 голосов
/ 12 августа 2011

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

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

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

По сути, вызов .load() является оберткой для $.get(), за которой следует вызов $(elem).html(someContent), где "someContent" - это responseText из 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);
  }
});
0 голосов
/ 12 августа 2011

Вы можете использовать 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/

...