如何使用AJAX替换另一个内容的DIV内容

问题描述：

AJAX/JQuery是完全新的，但我在我的Web App中非常需要这个。我正尝试用新内容替换DIV。如何使用AJAX替换另一个内容的DIV内容

就拿我这个DIV

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

，我会想完全用从我提交表单新的内容，以取代内容的“容器内容”。因此，当用户点击提交时，表单的结果将加载到DIV中并替换现有内容，并且应该像加载动画一样显示某些事件正在后台进行。

对不起，我没有提供代码的细节，就像我说的AJAX/JQUERY的新手段。谢谢！

可能的重复[Change content of div - jQuery]（http://stackoverflow.com/questions/7139208/change-content-of-div-jquery） – Steve

谷歌它，尝试一些 - 然后问一个问题，如果你已经尝试过没有工作。 – Novocaine

答

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

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

在jQuery的文档，你会发现更多关于它的信息的底部： jQuery Doc。

我不知道你想用AJAX做什么，你得到一个JSON？如果是的话，你可以把它串起来并追加它。

FYI：香草JS（普通的JavaScript）计数器部分将与像这样开始：

element.innerHTML = 'new content';

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

问候，Megajin

答

与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>') 
     } 
    }) 
});

答

如果你想给它一个HTML内容或文本内容，我建议你使用这样的：

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

，但如果你想加载来自另一页的内容我建议你使用类似下面这样的东西：

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

如何使用AJAX替换另一个内容的DIV内容

相关推荐