JQuery + AJAX динамическое содержимое div

Question

Я пытаюсь создать динамическую веб-страницу, чтобы показать какой-то контент и изменить его, не перезагружая полную страницу, а часть ее.

Когда я нажимаю кнопку моей навигационной панели она вызывает функцию JavaScript, чтобы изменить содержимое моего сНу тега

<div class="row text-left" id="center"></div> 

с этим кодом я положил в мой класс сНа некоторого тексте

$('#navHome').click(function(){ 
    $('#center').html("this is my home"); 
}); 

Теперь я хочу сохранить содержимое каждого раздела, чтобы перезагрузить его каждый раз, когда я нажимаю кнопку. Что-то вроде этого:

$('#navHome').click(function() { 
    $.get('home.txt', function(data) { 
     $("#center").html(data); 
    }, 'text'); 
}); 

в home.txt я есть хранить свой HTML код дома раздела, но я понятия не имею, как сделать это.

Answer 1

Try:

Удалить «Текст», который вы добавили в последний Аякса

$('#navHome').click(function(){ 
    $.get('home.txt', function(data) { 
     alert(data); 
     //process text file line by line 
     $('#center').html(data); 
    }); 
}); 

Answer 2

Я попытаюсь дать вам ответ, первый вообще жаль мой бедный английский.

Моей первой рекомендацией для вашего случая является использование AngularJS или любой аналогичной структуры, разработанной для создания SPA (Simple Page Application), который в основном означает то, что вы хотите, загружать полную страницу один раз и изменять только часть когда пользователь запрашивает его. Он также имеет множество функций, которые помогут вам быстрее и чище кодировать.

Теперь я собираюсь написать какой-то кусок коды на простом JQuery, если вы не хотите, чтобы узнать Угловой сейчас :)

function includeURL(idObj,url){ 
    var r=$.Deferred(); 
    $(document).ready(function() { 
     $(idObj).load(url, function() { 
      return r.resolve(); 
     }); 
    }); 
} 

Я использую эту функцию для загрузки части коды, idObj является ДИВ где вы хотите загрузить контент и указать путь к контенту. Примером может служить:

includeURL('#myDiv','html/path/to/content.html'); 

Попробуйте и скажите, есть ли у вас какие-либо проблемы.

Надеюсь, это поможет!

Answer 3

Предполагая, что содержимое файла Home.txt может просто быть помещен непосредственно в <div /> элемент (т.е. это просто текст или HTML), посмотрите на .load()function в JQuery

$('#center').load('home.txt', function() { 
    // This function is called when the contents are loaded successfully 
}); 

Так что ваши нажмите обработчик будет выглядеть примерно так:

$('#navHome').click(function() { 
    $('#center').load('home.txt'); 
}); 

Убедитесь, что home.txt находится в правильном каталоге.Вкладка «сеть» доступна в инструментах разработчика для всех хороших веб-браузеров поможет в отладке проблем, если содержимое не загружается правильно

Answer 4

попробуйте использовать следующий код:

 
$.ajax({ 
 
    url: "home.txt", 
 
    dataType: "text" 
 
}) 
 
    .done(function(data) { 
 
    $("#center").replaceWith(data); 
 
    });

Чтобы заменить все содержимое Div , используйте метод replaceWith (data) Чтобы добавить метод добавления add (data), используйте атрибут div. Вы получите тот же результат, используя метод $ get, но должен присвоить dataType как 'text';