Question

请完全了解AJAX / JQuery，但我非常需要在我的Web App中使用它。我试图用新内容替换DIV。

以我的DIV为例

<div id="container">Container Contents</div>

我想更换内容＆＃34;容器内容＆＃34;完全来自我的提交表单的新内容。因此，当用户点击提交时，表单的结果将加载到DIV并替换现有内容，并且应该有一种加载动画来显示背景中正在发生的事情。

很抱歉，我没有在代码中提供详细信息，就像我说的AJAX / JQUERY新手一样。感谢!!!

Answer 1

我猜你正在寻找这样的东西：

<script>
$( "yourDiv" ).html( "<b>Wow!</b> Such excitement..." );
$( "yourDiv b" )
  .append( document.createTextNode( "!!!" ) )
  .css( "color", "red" );
</script>

在jquery文档的底部，您将找到有关它的更多信息： jQuery Doc

我不知道你想用AJAX做什么，你得到一个JSON吗？如果是，您可以将其字符串化并附加它。

仅供参考：Vanilla JS（普通javascript）中的对应部分将从以下内容开始：

element.innerHTML = 'new content';

你也可以查看这个问题：Javascript: How to create new div dynamically, change it, move it, modify it in every way possible?接受的答案显示了很多好的信息。

此致，Megajin

Answer 2

使用JQuery，您可以使用.remove()和.append()函数。

尝试这样的事情：

$('#formId').on('submit', function (e) {
    e.preventDefault();

    $.ajax({
        url: '/route',
        method: 'post',
        data: $(this).serialize(),

        success: function() {
            $('#elementYouWantRemove').remove();
            $('#whereYouWantAddNewContent').append('<p> New content </p>')
        }
    })
});

Answer 3

如果您想为其提供HTML内容或文字内容，我建议您使用以下内容：

$("#YourDivIdOrName").html(your content as a string);

但是如果你想从另一个页面加载内容，我建议你使用类似这样的内容：

$("#YourDivIdOrName").load("Your content page url");

如何使用AJAX将DIV内容替换为其他内容

3 个答案: