使用ajax或ajax（json）将数据发布到同一页面中的php

I'm trying message application. My goal is get sender id and receiver id with a click on one button. After then post this datas with ajax or ajax(json) to php in same page.

I will use the incoming data in php with mysql_query. I tryed many examples. But never get result. My example code at below.

Little Note: Success alert comes but doesn't print any data on screen.

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
  <body>
    <button type="button" onclick="myFunc()">Get ID</button>
    <script>
    function myFunc()
    {
    var id = 'example';
    jQuery.ajax({
        url:'index.php',
        type: "POST",
        data: {'name':id},
        success: function(data)
            {
               alert("success");
            }
    });
    };
    </script>
   <?php
   if(isset($_POST['name']))
   {
      $value = $_POST['name'];
      echo $value;
   }
   else
   {
      echo "don't work.";
   }
   ?>
  </body>
</html>

</div>

<?php
   if(isset($_POST['name']))
   {
      echo json_encode(array(
        'value' => $_POST['name']
      ));
      exit();
   }
?>

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
  <body>
    <button type="button" onclick="myFunc()">Get ID</button>
    <script>
    function myFunc()
    {
    var id = 'example';
    jQuery.ajax({
        url:'index.php',
        type: "POST",
        data: {'name':id},
        dataType : 'json', 
        success: function(data)
            {
               alert("success");
            }
    });
    };
    </script>

  </body>
</html>

</div>