如何单击链接但不刷新页面？

Question

how can I use ajax with links and not refreshing the page? This code shows the links of brands

<div class="row">
  <div class="col-md-12">
    <div class="offer-tabs">
      <ul class="nav nav-tabs" id="offerTab" role="tablist">
        <li class="nav-item" >
          <a class="nav-link active" id="all-tab"   href="accueil2.php?r=All"  >Toutes les marques</a>
            <?php 
            $query="select * from marque";
            $query_run=mysqli_query($conn,$query);
            while ($row=mysqli_fetch_assoc($query_run)) {
            ?>
        </li>
        <li class="nav-item" >
          <a class="nav-link brand"   href="accueil2.php?ro=<?php echo $row['id_marque'] ?>"><?php echo $row['name'];?></a> 
        <?php } ?>
    </ul> 

Answer 1

I think you might want to look into javascript on the client.

For the following HTML:

<div>
 <a id="someId">Get data</a>
</div>

// Find the element
const link = document.getElementById("someId");
// attach an onclick listener
link.addEventListener("click", async (e) => {
  e.preventDefault(); // This prevents the navigation
  // Get data
  const response = await fetch(`/accueil2.php?ro${id_marque}`);
  // Convert data to usable text
  const data = await response.text();
  
  // Replace the contents of the div
  link.parentElement.innerHtml = data;
};

This is not the best way perse, but I believe it achieves what you want. You'll have to get the id_marque as a variable from somewhere.

Answer 2

I'm not really sure of what you asked... But if you want to open a link in a new tab, just add the target argument at your <a> element, using the _blank value.

Eg

<a href="https://google.com" target="_blank">Google</a>