使用 jQuery 将 html 加载到页面中答案

【问题标题】：Using jQuery to load html into page使用 jQuery 将 html 加载到页面中
【发布时间】：2013-08-12 07:58:22
【问题描述】：

我有一个页面，我需要在单击文件夹时将不同的 html 加载到 div 中。这种工作，因为点击... div 会打招呼。我尝试用 html 替换“hello”并使用 ' 而不是“但它不起作用。我还尝试使用 .load 和 .get 命令从外部文件中读取。这是关键部分和我的 .get和 .load 命令，无论我做什么都不起作用。

他们有另一种方法吗？或者有什么方法可以使用我所拥有的。

jQuery:

$("#one").click(function() {
        $("#read").html("hello");
});

HTML：

  <div id="read">

  </div>

.get 失败：

$("#one").click(function() {
  $.get('readfrom/one.txt')
  .success(function(data) {
     $('#read').html(data);
 });
});

加载失败：

$("#one").click(function() {
   $('#read').load('readfrom/one.txt');
});

【问题讨论】：

只需将 one.txt 保存为 html 文件 (one.html)...就可以解决...除非出于某种原因您需要 txt 文件？？？不明白你为什么会这样做？
我实际上只是尝试过：/它仍然没有工作。我什至将我的代码与其他所有代码分开并尝试了它们，但它们仍然不起作用。
这个网站是在网络服务器上运行还是在本地文件系统上运行？（因为这两种尝试都应该对我有用，但取决于浏览器，例如在 Chrome 上，AJAX 在本地文件系统上是不可能的)
目前在本地文件系统上。如果我把它移到我的网络服务器上，它会工作吗？
应该，但它应该例如与 firefox 一起在本地文件系统上工作

标签： jquery html

【解决方案1】：

你需要这样做：

$(document).ready(function() {
    $("#one").click(function() {
        $.ajax({
            url : "readfrom/one.txt",
            dataType: "text",
            success : function (data) {
                $("#read").html(data);
            }
        });
    });
});

【讨论】：

对我来说它没有任何错误，请检查您的路径或是否有错误
当我把它放在我的网络服务器上时，就像 Dr.Molle 建议的那样。非常感谢！

【解决方案2】：

这是怎么回事？

$(window).load(function(){

  $("#one").click(function() {

    /* Create ajax object for txt parsing */
    $.ajax({
      type: "GET",
      contentType: "text/plain; charset=utf-8",
      url: "readfrom/one.txt",
      success: readData,
      error: err
    });

    /* Successful load of file, perform this function */
    function readData(txt) {
      var fileData = $(txt);
      console.log ("data check: " + fileData);
      $('#read').append(fileData);
    }

    /* Unsuccessful load of file, log errors */
    function err(request, status, error) {
      console.log("Request: " + request);
      console.log("Status: " + status);
      console.log("Error: " + error);
    }

  }

}

我将成功/错误函数从 .ajax 调用中分离出来的主要原因是，我发现如果它们变大会变得混乱，但如果你想保持简短和甜蜜，请随时将它们添加到其中：

$.ajax({
  ...
  success: function(data){
    console.log("data: " + data);
  },
  error: function(request, status, error){
    console.log("Request: " + request);
    console.log("Status: " + status);
    console.log("Error: " + error);
  }
});

【讨论】：