Javascript 使用ajax加载文本文件内容

我有一个

HTML

和

CSS

选项卡，我想使用

ajax

请求从

.txt

文件加载每个选项卡下的文本内容。这意味着当我们单击任何选项卡时，它将从

.txt

文件加载文本内容。第一次激活选项卡时将加载内容。第一个选项卡已激活，文本内容已加载并显示在第一个选项卡下，但我的问题是，当我单击第二个或第三个选项卡时，它不会加载文本内容。 代码在这里是活的：

看看。由于您没有提供任何代码，我无法更好地帮助您

这是您的代码：

 $(document).ready(function() {
      if ($("#one").is(":checked")){
          $.ajax({
              url : "tab1.txt",
              dataType: "text",
              async:false,
              success : function (data) {
                  $(".tab1").html(data);
              }
          });
      };
      if ($("#two").is(":checked")){
          $.ajax({
              url : "tab2.txt",
              dataType: "text",
              async:false,
              success : function (data) {
                  $(".tab2").html(data);
              }
          });
      };
      if ($("#three").is(":checked")){
          $.ajax({
              url : "tab3.txt",
              dataType: "text",
              async:false,
              success : function (data) {
                  $(".tab3").html(data);
              }
          });
      };
    });

您应该这样做，添加：

  $(document).ready(function(){
    function loadText(){
      if ($("#one").is(":checked")){
           $.ajax({
             url : "tab1.txt",
             dataType: "text",
             async:false,
             success : function (data) {
               $(".tab1").html(data);
            }
         });
       }
       if ($("#two").is(":checked")){
          $.ajax({
            url : "tab2.txt",
            dataType: "text",
            async:false,
            success : function (data) {
              $(".tab2").html(data);
            }
         });
      }
      if ($("#three").is(":checked")){
          $.ajax({
          url : "tab3.txt",
          dataType: "text",
          async:false,
          success : function (data) {
              $(".tab3").html(data);
          }
        });
      }
    }
    $('input[type="radio"]').change(loadText);
  });

---

查看您的源代码，我看到JavaScript应该在设置按钮2和3的“checked”属性时运行，但checked属性是针对单选中的默认选项的，而不是针对当前选择的选项。更改选项卡时，第一个按钮仍将具有选中属性，因为它始终是默认值。有关这方面的更多信息，请参阅

我会将您的javascript更改为以下内容：

<script>
    $(document).ready(function() {
        if ($("#one").is(":checked")){
            $.ajax({
                url : "tab1.txt",
                dataType: "text",
                async:false,
                success : function (data) {
                    $(".tab1").html(data);
                }
            });
        };
    });
    function loadOne() {
        $.ajax({
            url : "tab1.txt",
            dataType: "text",
            async:false,
            success : function (data) {
                $(".tab1").html(data);
            }
        });
    }
    function loadTwo() {
        $.ajax({
            url : "tab2.txt",
            dataType: "text",
            async:false,
            success : function (data) {
                $(".tab2").html(data);
            }
        });
    }
    function loadThree() {
        $.ajax({
            url : "tab3.txt",
            dataType: "text",
            async:false,
            success : function (data) {
                $(".tab3").html(data);
            }
        });
    }
</script>

$（文档）.ready（函数（）{
如果（$（“#一”）是（“：选中”））{
$.ajax({
url:“tab1.txt”，
数据类型：“文本”，
async:false，
成功：功能（数据）{
$（“.tab1”）.html（数据）；
}
});
};
});
函数loadOne（）{
$.ajax({
url:“tab1.txt”，
数据类型：“文本”，
async:false，
成功：功能（数据）{
$（“.tab1”）.html（数据）；
}
});
}
函数loadTwo（）{
$.ajax({
url:“tab2.txt”，
数据类型：“文本”，
async:false，
成功：功能（数据）{
$（“.tab2”）.html（数据）；
}
});
}
函数loadThree（）{
$.ajax({
url:“tab3.txt”，
数据类型：“文本”，
async:false，
成功：功能（数据）{
$（“.tab3”）.html（数据）；
}
});
}

然后将onclick事件添加到三个按钮（如果在

或

上执行此操作，则不为正），因此第一个按钮添加

onclick=loadOne（）

，第二个按钮添加loadTwo（），第三个按钮添加loadTwo（）

---

我的代码可能有点多余，我是一个初学者，但希望这会有所帮助。

如果将单选按钮的ID设置为与文件名相同的ID，即tab1、tab2和tab3，则结果JavaScript代码可能如下所示：

$(document).ready(function () {
  const SELECTOR = '[type=radio]';

  function loadData(tabId) {
    $.ajax({
      url: `${tabId}.txt`,
      dataType: "text",
      async: false,
      success: (data) => {
        $(`.${tabId}`).html(data);
      }
    });
  }

  const checkedTabId = $(`${SELECTOR}:checked`).prop('id');
  loadData(checkedTabId);

  $(SELECTOR).change(function () {
    if (this.checked) {
      loadData(this.id);
    }
  });
});

这只是一个如何改进代码的简单示例

---

编辑您的问题并将相关代码添加到您的问题中。我已提供了一个实时url。你可以检查一下。我不想缩短你的代码和浪费我的时间：）所以这里是使用你的代码的解决方案