Как POST-значения хранятся в href-ссылке на одной странице на следующую страницу php

Question

У меня есть несколько ссылок на странице HTML / PHP, и я хочу передать значение, сохраненное в ссылке, когда они переходят на следующую страницу PHP через $_POST (я знаю, как это сделать с $_GET, но это это не то, что я хочу).

Я знаю, что мне нужно использовать javascript / jquery, и я пробовал много разных вещей, но я не смог заставить его работать. Я могу добавить атрибут onclick к href, если это поможет решить проблему.

ВНУТРИ "page1.php" или "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>

ВНУТРИ "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;
?>

Answer 1

Проблема в том, что вы не отправляете данные в вызове $.post. Предположительно, вы хотите отправить идентификатор / значение a элементов.

Во-первых, обратите внимание, что value не является допустимым атрибутом элемента a. Я бы предложил изменить это значение на атрибут data, чтобы избежать проблем с проверкой.

Во-вторых, для отправки данных в запросе вы можете построить объект, например так:

<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>

** Обновление **

Когда нажимается любая из ссылок href, открывается page2.php, в зависимости от которого нажимается ссылка, например. «link3 выше» со значением 300, page2.php что-то делает на основе этого значения. Я не хочу передавать все значения ссылок одновременно

В этом случае вы можете просто прочитать data-value из элемента и отправить его в запросе и прочитать его обратно в 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;
?>

Answer 2

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

После этого передайте при этом значение функции ajax.

Пример:

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