Ajax jquery mysqli更新

I'm trying to do a Ajax demo to teach myself the concept but I just can't make it work.

The sample I'm trying to get is to take a variable on the first page (in this case, the colour green) and if the green button is clicked, use that on the ajax processing page to record somehow that the green button was clicked (currently in the error log, then I'll move onto storing it in a database).

Ideally I'd like to be able to reuse the same snippet to change the variable to red, and have the error log report that the red button was pressed.

I've used the location.reload and the random number to prove to myself that the javascript is executing, and that the page is different with each load.

I'm not a javascript guy at all, you may be able to tell. Do I need to declare the a variable first or something else entirely?

uglytest.php

<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<!-- jQuery Ajax -->
<script type="text/javascript">
function clickyes(a) {
$.ajax({
       type: "POST",
       url: "./ajax.php",
       data: {"test":a},
       success: function (response) {
       default = $("#default").val();
       });
    location.reload();
}
</script>

<script type="text/javascript">
function clickno() {
    location.reload();
}
</script>


<?
echo mt_rand(0,99);
$result = "green"; 

echo "<p><form>here's a $result button. Do you want click on it?</p>";
echo "<button onclick=\"clickyes(" . $result . ")\" style=\"background-color: $result; \">Yes</button>";
echo "<button onclick=\"clickno()\">No</button></form>";

?>

ajax.php

<?
  $test = $_POST['test'];
   error_log($test, 0);
?>

changes here:

function clickyes(a) {
$.ajax({
       type: "POST",
       url: "./ajax.php",
        data: {test:a},
       success: function () {
           location.reload();
       }
       });
}

and here:

echo "<p><form>here's a $result button. Do you want click on it?</p>";
echo "<button onclick=\"clickyes('$result')\" style=\"background-color: $result; \">Yes</button>";
echo "<button onclick=\"clickno('$result')\">No</button></form>";

made it work. Hooray!

Here location.reload will be called without waiting for the ajax request, as ajax is a async function. This may be the issue. Keep reload in the success of ajax response.

function clickyes(a) {
$.ajax({
       type: "POST",
       url: "./ajax.php",
       data: {"test":a},
       success: function (response) {
       default = $("#default").val();
       location.reload();
       });

}


Also Change this: 
echo "<button onclick=\"clickyes('" . $result . "')\" style=\"background-color: $result; \">Yes</button>";

<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<form><p id="color-info">here's a  button. Do you want click on it?</p>
    <button color="" id='yesbutton'>Yes</button>
    <button >No</button></form>

<script type="text/javascript">
setColor();
// this code will be invoked when #yesbutton is clicked and this is called dedication method
$(document).on('click','#yesbutton',function(e){
  e.preventDefault();
  $.ajax
  ({
   type: "POST",
   url: "./ajax.php",
   data: {"test":$('#yesbutton').attr('color')},
   success: function (response) {
      //default = $("#default").val();
      //change color after success
      setColor();

   }


   });

});

// function first determine rgb color to create composite color
function setColor()
{
  //redcolor code
  $redcolor=Math.random()*255;
  // green color code
  $greencolor=Math.random()*255;

  //blue color code
  $bluecolor=Math.random()*255;
  //this will set the background color for first time
  $rgb=parseInt($redcolor)+','+parseInt($greencolor)+','+parseInt($bluecolor);
  $('#color-info').text("here's a rgb("+$rgb+") button. Do you want click on it?");
  $('#yesbutton').css("background",'rgb('+$rgb+')');
  //this will set the color attribute for first time
  $('#yesbutton').attr('color',$rgb);


}

</script>