Question

我试图创建一个动态网页来显示一些内容并进行更改，而不会重新加载整个页面，而是重新加载它。

当我按下导航栏的按钮时，它会调用JavaScript函数来更改div标签的内容

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

使用此代码我将一些文本放入我的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

尝试：

删除＆＃39;文字＆＃39;你在ajax的最后添加了

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

Answer 2

我会尽力给你一个答案，首先抱歉我的英语很差。

我对你的案例的第一个建议是使用AngularJS或它设计用于创建SPA（简单页面应用程序）的任何类似框架，它基本上意味着你想要的，一次加载整页，只改变页面的某些部分当用户请求它时。它还有许多功能，可以帮助您更快，更清洁地编码。

现在，如果您现在不想学习角度，我将在简单的jquery上编写一些代码：）

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

我使用此函数加载部分代码，idObj是您要加载内容的div和url内容的路径。一个例子可能是：

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位于正确的目录中。所有优秀Web浏览器的开发人员工具中提供的“网络”选项卡将帮助您在内容未正确加载时调试问题

Answer 4

尝试使用以下代码：

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

要替换所有div内容，请使用replaceWith（data）方法附加div内容应用追加（数据）方法; 您将使用$ get方法获得相同的结果，但必须将dataType指定为“text”;

JQuery + AJAX动态div内容

4 个答案: