1

这是我到目前为止所拥有的：

$(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>')
4

2 回答 2

2

如果我正确理解您的要求，它们如下：

  • 发出异步 HTTP 请求以获取一些 HTML
  • 使用 dataValModify() 函数修改返回的 HTML
  • 将修改后的 HTML 插入 ID 为“ajaxTest”的元素中

如果是这样，那么在我看来，您需要进行比您目前使用的更低级别的 ajax 调用，即$(elem).load()

本质上，调用.load()是一个包装器，$.get()然后调用$(elem).html(someContent)其中“someContent”是来自 HTTP 请求的 responseText。

因此，如果您想在将响应注入 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);
  }
});
于 2011-08-12T14:37:56.807 回答
0

您可以使用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/

于 2011-08-12T13:53:15.100 回答