Ajax 会在 Jquery 发送帖子后自动刷新 DOM 吗？答案

【问题标题】：Does Ajax automatically refresh the DOM after Jquery sends post?Ajax 会在 Jquery 发送帖子后自动刷新 DOM 吗？
【发布时间】：2015-11-02 11:50:28
【问题描述】：

我刚开始使用 Ajax，我并没有完全迷失……不知道它是如何工作的。

我认为 Ajax 向服务器发送（例如一个帖子）并返回 x 数据，但该数据会自动添加到 DOM（无需重新加载页面）。我有以下 jquery ajax 脚本：

$.ajax({
    method: "POST",
    url: "/url",
    data: { 
        'varname': varname, 
        'varname2': varname2
        // etc
    }
});

return false;

我刚刚了解到（但不知何故，我已经预料到了......）它返回的是内部数据，它没有与浏览器（当前）DOM 或 html 同步。我做了一个警报（数据）并看到了全新的 html 编译代码：

}).done(function(data) {
    alert(data);
});

return false;

问题是：我应该如何将我需要的数据从数据添加到当前的 html。我的意思是，如果发送的变量触发了新脚本（并生成了新内容），我该如何放置新内容，刷新或更新旧内容？

【问题讨论】：

这取决于您的 html 结构和 ajax 接收数据的结构，您必须读取和解释数据，然后通过 jQuery 或 javascript 将其插入所需的站点元素
看$.load为你“自动更新DOM”，无需自己处理结果：api.jquery.com/load
所以我只是用$( "#div" ).load( "/url" );替换它？我在哪里指定变量？

标签： jquery ajax

【解决方案1】：

Ajax 只是一个术语，用于从 JavaScript 发出 HTTP 请求，而不加载新页面。

我刚刚了解到（但不知何故，我已经预料到了......）它返回的是内部数据，它没有与浏览器（当前）DOM 或 html 同步。

正确。这些数据可供 JavaScript 使用，以便您的代码可以随心所欲地使用它。

问题是：我应该如何将我需要的数据从数据添加到当前的 html。

DOM 操作。

jQuery 提供了许多方法来帮助解决这个问题，包括 replaceWith 和 append。

【讨论】：

您好，谢谢您的回答，我正在寻找如何使它工作。我能够改进和简化我的 php 脚本，但是关于 ajax，我只能想到像 $( "html" ).html( data ); 这样的东西，它实际上是“工作”，但它破坏了页眉和页脚 javascripts（实际上所有的 js，不知道为什么） .我只需要从data 拿一个 div 容器，但我不知道怎么做。你能帮我吗？
@ChazyChaz — 您应该仅从服务器获取要替换的数据，然后仅替换该数据，而不是整个文档。否则你最好不要使用 Ajax。
好的，我刚刚找到 filter 和 find。我要试试。

【解决方案2】：

而不是使用 .done 您可以将代码编辑为

$.ajax({
method: "POST",
url: "/url",
data: JSON.stringify({ 
    'varname': varname, 
    'varname2': varname2
    //etc
}),
dataType: "json",
contentType : "application/json;charset=utf-8", // so that your ajax call will automatically convert the data returned from the server as json.
success: function(response){
    // do your job here. You may change DOMs, manipulate data to client.
 }
});

使用上面的代码，就可以顺利拿到服务器返回的数据了。

【讨论】：

这是使用.done 的旧方式（即.done 是使用.success 的新方式）。否则它们是相同的。这如何回答这个问题？

【解决方案3】：

不，您的脚本必须处理来自服务器的响应并决定如何处理它。

如果您希望插入从您的 ajax 请求返回的 html 并将其插入到 DOM/页面中，那么您可以查看诸如 html、append 和 insertAfter 之类的函数来完成此操作。

一个示例可能如下所示：

}).done(function(data) {
    $('#someContainerId').html(data);
});

【讨论】：

【解决方案4】：

首先，您必须设置请求的页面 (url) 以仅响应您需要的数据（例如，您可能不需要在 <html> 和 </html> 之间的整个网页。

在 PHP 文件的开头使用

if(!empty($_POST['PASSED_VARIABLE'])) {
    ...
    // Manipulate the data.
    ...

    echo $data; // Echo the result.
}

当你的 Ajax 函数完成后，你可以将接收到的数据插入到 DOM 中：

.done(function(data) {
    $('div#results').html(data); // Or any other DOM manipulation.
})

【讨论】：

添加$('div#results').html(data); 是否会使用新内容更新页面？为什么需要php代码？
你能定义你期望达到的目标吗？您想只更改页面的一部分还是完全更改页面？
我想发送一些变量来触发脚本并生成内容，然后我需要打印它而不重新加载页面。

【解决方案5】：

解决方案非常简单：拿走我需要的东西并打印出来：

    }).done(function(data) {
        var new_content = $(data).find('#search');
        $('#search').html(new_content);
    });

感谢您的回答。

【讨论】：