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

Question

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

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

Answer 1

Ajax 以 2 种口味加载到选项卡中，香草味和 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>

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

Reloading page custom fetched data

php

sql

ajax

jquery

tabs