发送和接收数据?Ajax、Jquery和PHP - Sending and receiving data ? Ajax, Jquery and PHP

我想要创建的是一个考勤按钮。一旦用户点击按钮，+1将被添加到参加的总人数中。有没有什么方法可以在不刷新页面的情况下做到这一点？我知道如何将它连接到数据库以添加+1。

我听说AJAX和PHP都可以使用，但我对这些语言的了解有限。请帮忙吗？这是我迄今为止所拥有的。。。

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

第一步：您必须从输入或其他事件中获取值

第二步：使用ajax方法发送数据，如下所示：

$.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);                 
                }
            });

PHP，简单的例子可能是这样的：

// to do with $data
$result = "your result";
echo json_encode($result);
?  >

最后，成功或完成ajax中的操作对象html：
var parente=$（this）.prev（）.text（）；var current_val=parseInt（$（this）.next（）.text（））；current_val++；$（this）.next（）.text（current_val+'Going'+parente）；

要停止回发，请尝试此操作。

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

})；

返回false停止刷新

我想这就是你想要的东西http://plnkr.co/edit/0cKQtCzqT79WHSykDq0F?p=info

我建议添加类名，这样你就可以更好地跟踪正确的元素

    <!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;
  });
});