Как я могу заменить содержимое DIV другим контентом, используя AJAX

Question

Пожалуйста, совершенно новый для AJAX/JQuery, но мне это очень нужно в моем веб-приложении. Я пытаюсь заменить DIV на новый контент.

Возьмем, к примеру у меня есть этот Див

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

Я хотел бы заменить содержание «контейнер Содержание» с новым содержанием полностью из моей Submit формы. Таким образом, когда пользователь нажимает «Отправить», результат формы загружается в 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? Если да, вы можете просто подкрепить его и добавить его.

FYI: Счетчик часть в 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");