重新加载页面自定义获取的数据

Posted 2023-05-08

【中文标题】重新加载页面自定义获取的数据

【英文标题】：Reloading page custom fetched data

【发布时间】：2021-08-18 07:12:58

【问题描述】：

基本上，我正在尝试从按钮加载带有以下unique_id 数据的选项卡。问题是我希望标签在不重新加载页面的情况下加载相应的变量。我在这里查看了有关 ajax URL 重写的解决方案，但没有任何效果。我不在乎在这里和那里添加更多文件，我只需要解决这个小问题。谢谢

<a href="?user_id='. $row['unique_id'] .'">
... blah .. stuff.. etc
</a>

【问题讨论】：

所以你想要一个在后端查询某些内容的链接，然后返回 html，然后它将出现在选项卡中 - 无需重新加载页面，对吗？几乎是直截了当的ajax 请求？

@Kinglish 是的，上面的代码已经被一个 ajax 事件处理，但是，当它加载唯一 id 选项卡时，它只在重新加载浏览器时才有效

您到底需要什么？将上面的href 更改为在查询字符串中包含unique_id？我不明白这句话：加载唯一标识选项卡时，它仅在重新加载浏览器时才有效

@Kinglish 我希望用户点击带有上述链接的按钮，以便在子选项卡上加载数据而无需重新加载页面。如果页面重新加载，我只能实现这一点

unique_id 来自哪里？或者，实际上回到之前的问题。您是否只需要知道如何触发将内容写入选项卡的 ajax 事件？

【参考方案1】：

Ajax 加载到 2 种风格的选项卡中，vanilla 和 jquery

function loadTabOG() 
  let url = 'someURLThatWillReturnHTML.php';
  fetch(url)
    .then(response => response.text())
    .then(html => 
      document.getElementById('tab-2').innerHTML += html
    )


  // the snippet won't allow us to do an ajax request, so we'll simulate the response here.
  document.getElementById('tab-2').innerHTML += "<p>Here is some new html from regular javascript</p>";



function loadTabJQ() 
  let url = 'someURLThatWillReturnHTML.php';
  $.ajax(
    url: url,
  ).done(function(html) 
    $('#tab-2').append(html)
  );

  // the snippet won't allow us to do an ajax request, so we'll simulate the response here.
  $('#tab-2').append("<p>Here is some new html from jquery</p>")

.tab 
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  margin: 15px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='tab' id='tab-1'>
  <h3>Tab 1</h3>
  <ul>
    <li><a href='javascript:void(0)' onclick='loadTabOG()'>Load tab 2 using regular javascript</a>
    </li>
    <li> <a href='javascript:void(0)' onclick='loadTabJQ()'>Load tab 2 using jquery</a>
    </li>
  </ul>
</div>

<div class='tab' id='tab-2'>
  <h3>Tab 2</h3>
  <div>