发送和接收数据？ Ajax，Jquery和PHP

What I would like to create is a attendance button. Once the user clicks on the button +1 would be added to the total number of people attending. Is there any way of doing this without refreshing the page? I some how need to connect it to the database to add +1.

I've heard AJAX could be used and PHP but I have limited knowledge in these languages. Any help please? Here is what I have so far...

$(document).on('click', 'button', function(){
    var parente = $(this).prev().text();
    var current_val = parseInt($(this).next().text());
    current_val++;
    $(this).next().text(current_val +' Going '+parente);
    // Here you can make ajax request to send the number of people who is going to those events
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head></head>
    <body>
        <div class="my_event">
            <span>Event 1</span>
            <button>I wanna go</button>
            <div class="output_event">0</div>
        </div>
    </body>
</html>
<script src="button.js"></script>

first step: you must get value from input or other event

second step: send that data using ajax method, like this:

$.ajax({
                url: '/Assessment/Save',
                type: 'POST',
                data: {A:QNo},
                async: false,
                success: function (data) {
                    //alert("Test: " + data.result);
                    if (data.result == "T")
                        flag = true;  
                      successCallback(flag);
                },
                error: function (req, status, error) {
                    //alert("R: " + req + " S: " + status + " E: " + error);
                    alert('Unable to connect server!'); 
                   flag = false;  
                    successCallback(flag);                 
                }
            });

  1. And PHP, example simple maybe like that:

    // to do with $data

$result = "your result";

echo json_encode($result);

?  >

  2. and last, manipulation object html in success or complete ajax:

    var parente = $(this).prev().text(); var current_val = parseInt($(this).next().text()); current_val++; $(this).next().text(current_val +' Going '+parente);

To stop the postback, try this.

$(document).on('click', 'button', function(){   
var parente = $(this).prev().text();

var current_val = parseInt($(this).next().text());
   current_val++;
$(this).next().text(current_val +' Going '+parente);    
return false;
// Here you can make ajax request to send the number of people who is going to those events

});

return false; stops the refresh

I gues this is something you where looking for http://plnkr.co/edit/0cKQtCzqT79WHSykDq0F?p=info

i would suggest to add classname so you can track the right element better

    <!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="style.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-2.1.3.min.js" data-semver="2.1.3" data-require="jquery"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="my_event">
      <span class="myEventname">Event 1</span>
      <button class="myButton">I wanna go</button>
      <div class="output_event">0</div>
    </div>
  </body>

</html>



$(document).ready(function () {

  $('.myButton').click(function(){
    var myEvent     = $(this).closest('.my_event');

    var myEventname = myEvent.find('.myEventname').text();
    var currentVal  = parseInt(myEvent.find('.output_event').text());
    currentVal++;
    myEvent.find('.output_event').text(currentVal +' Going '+myEventname);

    var postData = {
      'eventname' : myEventname,
      'currentVal' : currentVal
    };

        $.ajax({
            url: './myUpdatePage.php',
            //method: 'POST',
            data: postData,
            success: function (data) {
              //Do something for successfuly received page
            },
            error: function (data) {
              //Do something when page isn't received
            }
            //, dataType: 'json'
        });

    return false;
  });

});