How to read values in Ajax ?

Hi Team

Is there any mate who can show me in Ajax, if there is better approach to read values in your ajax call request? That will read these values as they are passed on your parameter. What i want to achieve is similar to an example of light bulb, if the bulb is set true is on. If the bulb is set false is off. Now i want something similar to my below code logic for my current channel. Currently the buttons only accept these moment they are fired from the browser, i want a better approach and scale my application better.

<div class="col-md-2 text-center"> 
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Subscribe</button> <br>
 </div>
  <!------
  ---->
  <br/>
<div class = "col-md-2 text-center">
  <button id = "singlebtn" name="singlebtn" class="btn btn-primary">Unsubscribe</button> <br>
</div>



<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $.ajax({
      url:'https://api.thingspeak.com/update?api_key=***&field8=0',
      type:'GET',
      data:{
        format:'text'
      },
      success:function(response){
        alert(response);
      },
      error:function() {
        $('#error').text("There was an error processing your request.Please try again");
        $('#singlebutton').append(data);
      }
      
    });
    
    // second button for unsubscribe.
    $(document).ready(function(){
       $.ajax({
      url:'https://api.thingspeak.com/update?api_key=***&field8=1',
      type:'GET',
      data:{
        format:'text'
      },
      success:function(response){
        alert(response);
      },
      error:function(){
       $('#error').text("There was an error processing your request.Please try again");
        $('#singlebtn').append(data); 
      }
    
    });
    });
    });

</script>