Question

当AJAX调用返回html时，是否可以使用jQuery来更改响应字符串的内容？如果是这样，那怎么办呢？

编辑：

此问题针对在将其写入页面

之前编辑响应

Answer 1

那取决于您如何请求数据。如果你有$ .ajax等，那么你可以在成功处理程序中进行必要的修改。我假设你没有很好地理解jQuery，你使用$ .load（）来加载数据，在这种情况下，用

替换它是最容易的。

$.get('/somecode.php', function(data) {
    data = $(data);

    // Find and remove all anchor tags for example
    data.find('a').remove();
    $('#target-id').append(data);
});

或者如果您不想创建jQuery对象，您可以轻松地执行类似

的操作

$.get('/somecode.php', function(data) {
    // Replace all strings "foo" with "bar" for example
    data = data.replace('foo', 'bar');

    // Manually append it to DOM or do whatever you want with it
    $('#target-id').append(data);
});

Answer 2

如果你正在使用jquery 1.5+，你可以使用ajax datafilter。

成功接收响应数据后立即调用
dataFilter回调选项。＆GT;它接收返回的数据和dataType的值，并且必须返回（可能＆gt;更改的）数据以传递给成功。

示例代码：

$.ajaxSetup({
    dataFilter: function (response, type) {
        response = response.replace(/username/g, 'Sina Salek');
        return response;
    }
});

https://api.jquery.com/jquery.ajax/

Answer 3

回调函数中的

，类似于

function(response){
  response = //edit response here
  $("#content").html(response);
}

Answer 4

您可以通过在jquery对象中转换数据本身来使用jQuery编辑返回数据的内容。

$.get(file.html, function(data){

    var $obj = $('<div>').html(data); //explaination of this below

    $obj.find("span").remove(); //just an example, this removes all the SPANs

    $("#destination").html($obj.first('div').html());
});

请注意，在编辑之前需要将返回的数据包装在DIV中，因为如果返回的数据在HTML结构中没有有效的根节点，则jQuery对象将无法使用find执行修改和其他功能。

出于这个原因，最好包装返回的数据，修改它，然后在插入目标html节点之前将其解包。

Answer 5

编辑了maxedison的准确性建议：

你可以直接操作返回字符串作为genesis指出（不需要JQuery来做），或者你可以通过解析html来重新创建一个新的输出，使用像jParse这样的帮助库：

http://jparse.kylerush.net/demo

Answer 6

原始javascript

核心：Object.defineProperty(this, 'responseText', { value: JSON.stringify(data), writable: false });

使用对象分配的方法将无效，this.responseText = {...};

<button>send</button>
<p>hello</p>

<script>
  const nativeOpen = XMLHttpRequest.prototype.open;
  const nativeSend = XMLHttpRequest.prototype.send;

  const proxiedOpen = function () {
    // Mount the URL that needs to be intercepted to the `XMLHttpRequest` object.
    if (arguments[1].includes('jsonplaceholder.typicode.com/todos/1')) this._url = arguments[1];
    nativeOpen.apply(this, arguments);
  };

  const proxiedSend = async function () {
    if (this._url) {
      // Make other requests, it can also be a fixed value.
      const data = await fetch('https://jsonplaceholder.typicode.com/todos/5').then(res => res.json());
      // The data of `todos/1` is rewritten as `todos/5`
      Object.defineProperty(this, 'responseText', { value: JSON.stringify(data), writable: false });
    }
    nativeSend.apply(this, arguments);
  };

  // Override native methods
  XMLHttpRequest.prototype.open = proxiedOpen;
  XMLHttpRequest.prototype.send = proxiedSend;

  document.querySelector('button').addEventListener('click', () => {
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        document.querySelector('p').textContent = this.responseText;
      }
    };
    xhttp.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
    xhttp.send();
  });
</script>

Answer 7

没有。 jQuery只能在DOM元素上运行。所以，直到那些是从字符串创建的，你所拥有的只是......一个字符串。

我可以问你为什么担心这样做吗？如果这是一个性能问题（即你用AJAX响应创建了大量的DOM元素，然后使用jQuery编辑了很多），那么很可能你的PHP脚本应该被修改以返回更理想的响应。如果问题是您不希望用户在jQuery进行DOM修改之前看到响应，那么只需将其全部隐藏在隐藏的div（display：none）中，直到修改完成。

编辑 - 1个例外 jQuery有一个$ .trim（）函数，它将从字符串的开头和结尾删除空格。不确定是否还有其他人。

使用jQuery来改变AJAX响应

7 个答案: