Count clicks on one button, save it to MYSQL and t

问题:

Here is what I want to accomplish on http://geheimprojekt.nomachines.org/

1. User clicks on "Nochmal!" Button (New word combination is generated)
2. Send the click to my MySQL database (withou reloading the page), increase "clicked" row by 1
3. Update the text in a paragraph "n Word combinations have been generated so far."

This is my first attempt to work with AJAX. I have jQuery knowledge but i can't connect the dots it seems.

The 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);

回答1:

To get this to work is very simple. You need some html for the future div where you want to place the couting:

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

Then right at the end of the generator() function you add this:

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

Now in your phpfile.php file you will need the code to increment the count. I guess you know how to do this part if now i can help with it too. I'll add some sample code here so you have an idea.

<?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;
?>

By doing the echo above you will return the incremented value and the ajax will display it.

Update 1

Added more comprehensive php code

NOTE: if you add the jquery script please change the generator function to use jquery.

回答2:

to send AJAX request on clicking use:

$('#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>`
  }
});
});

At accept.php use script increasing clicks counter by 1.

回答3:

Using jQuery you could bind click event to your button and make ajax request.

• JQuery ajax doc

On server side your PHP page should update SQL data. Follow Javascript demo code

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