Javascript 使用ajax在单击按钮时显示表

我有一个页面如下所示：

默认列表名称是当前显示页面的名称。下面有两个按钮，然后是一个默认列表表。单击Btn1后，它将重新显示默认列表表，但单击Btn2时，将显示另一个表，替换默认列表表。让我们把第二张表叫做第二张表。一旦表格更改，标题默认列表名称也将更改为第二个列表名称

为此，我将使用AJAX，以便应用实时按钮单击和相应表的显示。但我对阿贾克斯还是新手，所以我的日子很不好过

以下是我当前的代码：

var title = $("#title").text();
var btn1 = $("#btn1");
var btn2 = $("#btn2");

/** If one of the buttons is clicked after another and then displays a table, the previous ajax that displayed the previous table, will be removed **/
$(document).ready(function() {
    btn1.on("click", function() {
        displayDefaultList();
    });
    btn2.on("click", function() {
        displaySecondList();
    });
});

function displayDefaultList(){
    console.log("display default list table");
    /*$.ajax({
        type: 'GET',
        dataType: 'json',
        cache: false,
        url: 'url to current page (not sure)',
        async: false
    }).*/
}

function displaySecondList(){
    console.log("display second list table");
}

---

我希望我在澄清自己，希望你们能帮助我

我写这篇文章是为了告诉你，你可以随时显示和隐藏你的表格

$document.readyfunction{ $mytable1.show； $mytable2.0； $button1.clickfunction{ $text.htmledfault列表名称； $mytable2.0； $mytable1.show； }; $button2.clickfunction{ $mytable1.0； $mytable2.show； $text.htmlSecond列表名称； }; }; 默认列表名 按钮1 按钮2 文本1 文本1 文本1 文本2 文本2 文本2 文本3 文本3 文本3 文本4 文本4 文本4 框1 框1 框1 框2 框2 框2 框3 框3 框3 方框4 方框4 方框4

---

我为你创作了这把小提琴：

基本上，每次单击按钮都将模拟对API的调用，该API返回一个非常简单的JSON对象。如果成功，代码将解析响应，清空表并向其追加一行数据，最后更改标题

请注意，这两个按钮的代码几乎相同，除了a是从AJAX返回的JSON，b是标题：

HTML:

JS:

---

您可以看看post：如果您真的想控制ajax请求，请在需要时中止它们。或者您可以禁用第二个按钮，直到加载第一个表时显示加载栏。请参阅@Ethelene如何处理ajax响应？谢谢。我会试试看。@EtheleneLaverne如果它适合你，我相信它会的。你总是可以接受答案：。谢谢现在可以了。但是我对PHP还有另外一个问题，我可能会在另一个问题中提出。谢谢让我们来，谢谢你。但是url中到底是什么？“/echo/json/”？其中的url是web服务的url，它将返回json数据供您存储在表中

<p id="title">
  This title will be replaced...
</p>
<button id="btn1">
  First list
</button>
<button id="btn2">
  Second list
</button>
<table id="table">
  <thead>
    <th>Col 1</th>
    <th>Col 2</th>
  </thead>
  <tbody>
  </tbody>
</table>

var btn1 = $("#btn1");
var btn2 = $("#btn2");

$(document).ready(function() {
  btn1.on("click", function() {
    displayDefaultList();
  });
  btn2.on("click", function() {
    displaySecondList();
  });
});

function displayDefaultList() {
  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: '/echo/json/',
    async: false,
    data: {
      json: JSON.stringify({
        row: [1, 2]
      })
    },
    success: function(result) {
      $('#title').text('first list');
      $('#table tbody').remove();
      var newRow = '<tbody><tr><td>' + result.row[0] + '</td></tr><tr><td>' + result.row[1] + '</td></tr></tbody>';
      $('#table').append(newRow);
    }
  });
}

function displaySecondList() {
  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: '/echo/json/',
    async: false,
    data: {
      json: JSON.stringify({
        'row': [3, 4]
      })
    },
    success: function(result) {
      $('#title').text('second list');
      $('#table tbody').remove();
      var newRow = '<tbody><tr><td>' + result.row[0] + '</td></tr><tr><td>' + result.row[1] + '</td></tr></tbody>';
      $('#table').append(newRow);
    }
  });
}