Question

我有一个页面，我需要在单击文件夹时将不同的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);
 });
});

失败.load：

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

Answer 1

你需要这样做：

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

Answer 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);
  }
});

使用jQuery将html加载到页面中

2 个答案: