使用 ajax 加载文本文件内容

Question

我有一个HTML 和CSS 选项卡，我想使用来自.txt 文件的ajax 请求在每个选项卡下加载文本内容。这意味着当我们单击任何选项卡时，它会从.txt 文件加载文本内容。首次激活选项卡时将加载内容。第一个选项卡已被激活，文本内容已加载并显示在第一个选项卡下，但我的问题是，但当我点击第二个或第三个选项卡时，它不会加载文本内容。 代码在这里：http://testweb.epizy.com/ajax-load/index.html

Answer 1

如果您将单选按钮的 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);
    }
  });
});

这只是一个简短的示例，说明如何改进您的代码。

JSFiddle example

Answer 2

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

我会把你的 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>

然后为三个按钮添加一个 onclick 事件（如果这会在 <input> 或 <label> 上继续，则不是肯定的），因此为第一个按钮添加 onclick=loadOne()，为第二个按钮添加 loadTwo()，然后loadThree() 用于第三个。

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

Answer 3

看看JQuery load function 。由于您没有提供任何代码，我无法为您提供更好的帮助。

这是你的代码：

 $(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);
  });