计算单击一个按钮,将其保存到MYSQL,然后显示当前值(AJAX,PHP)

时间:2012-04-20 11:51:31

标签: php jquery ajax

以下是我想在http://geheimprojekt.nomachines.org/

上完成的工作
  1. 用户点击“Nochmal!”按钮(生成新单词组合)
  2. 将点击发送到我的MySQL数据库(重新加载页面),将“点击”行增加1
  3. 更新段落中的文字“目前已生成字组合。”
  4. 这是我第一次尝试使用AJAX。 我有jQuery知识,但我似乎无法连接点。

    SQL

    CREATE TABLE IF NOT EXISTS `sggcount` (
      `counter` bigint(20) NOT NULL DEFAULT '2'
    ) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_german2_ci;
    
    --
    -- Dumping data for table `sggcount`
    --
    
    INSERT INTO `sggcount` (`counter`) VALUES
    (2);
    

3 个答案:

答案 0 :(得分:2)

要使其工作非常简单。你需要一些html用于你想要放置couting的未来div:

<div id="counting"></counting>

然后在generator()函数的末尾添加:

function generator(){
    /*your code here...*/    
    var element = document.createElement("div");
    element.setAttribute("id", "result");
    element.appendChild(document.createTextNode(name));
    document.getElementById("placeholder").appendChild(element);
    /*the ajax code here*/
    var url='urltophpfile/phpfile.php';
    $.get(url,function(data){
        $('#counting').html(data+' Word combinations have been generated so far.');
    });
 }

现在在phpfile.php文件中,您将需要代码来增加计数。我猜你知道怎么做这个部分,如果现在我也可以帮忙。我将在这里添加一些示例代码,以便您有一个想法。

<?php
  mysql_connect('localhost', 'db-sgg', 'password') or die('Cannot connect to database server');
  mysql_select_db('db1152127-sgg') or die('Cannot select database');
  $databasecall = mysql_query("SELECT counter FROM sggcount WHERE counter > 1");
  /*so here you select the already stored value and then you make an update to increment it*/
  mysql_query("UPDATE sggcount SET counter=counter+1");
  $count = mysql_fetch_assoc($databasecall);
  echo $count['counter']+1;
?>

通过执行上面的回显,您将返回递增的值,ajax将显示它。

更新1

添加了更全面的PHP代码

注意:如果添加jquery脚本,请更改生成器函数以使用jquery。

答案 1 :(得分:0)

使用jQuery,您可以将click事件绑定到按钮并发出ajax请求。

在服务器端,您的PHP页面应该更新SQL数据。 关注Javascript演示代码

$(document).ready(function(){
    $('button-selector').click(function(){
        //use jquery ajax call to call php server page that update SQL data
        $.ajax({
              url: "updateClick.php",
             context: document.body
             }).success(function() { 
                     //success callback
             });
    });
});

答案 2 :(得分:0)

在点击使用时发送AJAX请求:

$('#button').click(function(){ // when user `click` element with `id="button"` (#button)
 $.ajax({ // Start AJAX call
  url: 'accept.php', // URL to send AJAX request
  success: function(data) { // Function to execute on SUCCESS reply (reply data as paramenter)
    var cc = $('#clicks_count').html(); // In your element with `id="clicks_count"` you store your click count (`<a id="clicks_count">21</a>`). Assign to `cc` javascript variable value of clicls_count
    $('#clicks_count').html(cc + 1); // Increasing clicls_count on 1 and write it to `<a id="clicks_count">22</a>`
  }
});
});

在accept.php上使用脚本增加点击计数器1。