jQuery发送帖子后，Ajax是否会自动刷新DOM？

我刚刚开始使用Ajax，并没有完全失去......不知道它是如何工作的。jQuery发送帖子后，Ajax是否会自动刷新DOM？

我认为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。我的意思是，如果发送的变量触发了一个新的脚本（并且生成了新内容），我该如何放置新内容，刷新或更新旧内容？

来源

2015-11-02 Chazy Chaz

这取决于您的html结构和ajax接收数据的结构，您必须阅读并解释数据，然后通过jQuery或JavaScript将其插入到所需的站点元素 – Fanax

查看'$ .load'到“自动更新DOM“，而无需自己处理结果：http://api.jquery.com/load/ –

所以我只是用'$（”#div“）.load（”/ url“ ）;'？我在哪里指定变量？ –

的解决方案是非常简单的：采取什么样的我需要并打印它：

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

感谢您的回答。

来源

2015-11-02 14:26:59

而不是使用.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. 
} 
});

的，你可以将数据从服务器返回的顺利。

来源

2015-11-02 11:56:18 n00bster

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

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

如果你想插入从您的AJAX请求返回的HTML并将其插入intto的DOM /页，那么你可以考虑功能，如html，append和insertAfter做到这一点。

一个例子可能是这样的：

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

来源

2015-11-02 11:56:53

阿贾克斯只是给做一个HTTP请求，从JavaScript，而无需加载新页面的过程中的一个术语。

我刚刚得知（但不知何故，我已经期待这个...），它返回的是内部数据，它不会与浏览器（当前）DOM或html同步。

正确。数据可用于JavaScript，以便您的代码可以随心所欲地执行任何操作。

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

DOM操纵。

jQuery提供了很多帮助的方法，包括replaceWith和append。

来源

2015-11-02 11:58:18 Quentin

嘿谢谢你的回答，我在这里看看如何使它工作。我能够改进和简化我的php脚本，但关于ajax我只能想到像'$（“html”）.html（data）;'它实际上“工作”，但它打破了页眉和页脚javascripts（其实所有的js都不知道为什么）。我只需要从'data'拿一个div容器，但我不知道如何。你可以帮我吗？ –

@ChazyChaz - 你应该只从你的服务器中取出你想要替换的数据，然后替换它，而不是整个文档。否则，你可能不会使用Ajax。 – Quentin

好吧，我刚刚找到'filter'和'find'。我会尝试。 –

首先，您必须设置请求的页面（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. 
})

来源

2015-11-02 11:59:02 Justas

是否添加'$（'div＃results'）。html（data）;'会用新内容更新页面？为什么我需要php代码？ –

你可以定义你期望实现什么？你想完全改变你的页面或页面的一部分吗？ – Justas

我想发送一些变量来触发脚本并生成内容，然后我需要在不重新加载页面的情况下进行打印。 –

jQuery发送帖子后，Ajax是否会自动刷新DOM？

回答

相关问题