如何将存储在一个页面中的href链接中的值POST到下一个php页面

I have several links in a HTML/PHP page and I want to pass the value stored in the link when they are clicked to the next PHP page via $_POST (I know how to do it with $_GET but that is not what I want).

I know I need to use javascript/jquery and I have tried a lot of different things but I haven't been able to get it working. I can add an onclick attribute to href, if it helps to solve the problem.

INSIDE "page1.php" or "page1.html"

// Send the values of variables var1, var2, etc. to the new PHP page...
<div class="super">
   <a href="page2c.php" class="top" id="var1" value="100">good</a> 
</div>
<div class="super">
   <a href="page2c.php" class="top" id="var2" value="200">better</a> 
</div>
<div class="super">
   <a href="page2c.php" class="top" id="var3" value="300">best</a> 
</div>
<script>    
  (function() {
     $("#id").on("click",function(e) {
       e.preventDefault(); 
       $.post(this.href,function(value) {
         $(".top").html(value);
       });
     });
   });
</script>

INSIDE "page2.php"

<?php
    // Retrieve the URL variables (using PHP and jquery).

   $val_1= $_POST['var1'];
   $val_2= $_POST['var2'];
   $val_3= $_POST['var3'];

    //to test we retrieved the values from page1
    echo "value of var1 is: ".$var_1;
?>

var value= $(this).attr('value');

After that pass thus value to ajax function.

Example:

var record_id=jQuery(this).attr('data-key');
                jQuery.ajax({
                    url: url,
                    dataType:'json',
                    type: "POST",
                    data:{
                        record_id:record_id,
                    }

The issue is because you're not sending any data in the $.post call. Presumably you want to send the id/value of the a elements.

Firstly, note that value is not a valid attribute of an a element. I'd suggest changing this to a data attribute to avoid validation issues.

Secondly, to send the data in the request you can build an object, like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="super">
  <a href="page2c.php" class="top" id="var1" data-value="100">good</a>
</div>
<div class="super">
  <a href="page2c.php" class="top" id="var2" data-value="200">better</a>
</div>
<div class="super">
  <a href="page2c.php" class="top" id="var3" data-value="300">best</a>
</div>

<button id="id">Click me!</button>

<script>
  $(function() {
    $("#id").on("click", function(e) {
      e.preventDefault();
      var data = {};
      $('a').each(function() {
        data[this.id] = $(this).data('value');
      });      
      console.log(data);
      
      $.post(this.href, data, function(value) {
        $(".top").html(value);
      });
    });
  });
</script>

** Update **

When any of the href link is clicked, page2.php is opened and based on which linked is clicked e.g. 'link3 above' which has a value 300, the page2.php does something based on that value. I don't want to pass all values of the links at once

In this case you can just read the data-value from the element and send it in the request and read it back in the PHP:

$(function() {
  $(".super a").on("click", function(e) {
    e.preventDefault();
    $.post(this.href, {
      value: $(this).data('value')
    }, function(value) {
      $(".top").html(value);
    });
  });
});

<?php
   $val = $_POST['value'];
   echo "value of var1 is: ".$val;
?>

</div>