Question

我想创建的是出勤按钮。一旦用户点击按钮+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>

Answer 1

第一步：你必须从输入或其他事件中获得价值

第二步：使用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);

?  >

最后，操作对象html成功或完成ajax：

var parente = $（this）.prev（）。text（）; var current_val = parseInt（$（this）.next（）。text（））; current_val ++; $（this）.next（）。text（current_val +＆＃39; Going＆＃39; + parente）;

Answer 2

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

$(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; 停止刷新

Answer 3

我想这是你在寻找的地方 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;
  });

});

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

3 个答案: