Send data from javascript to a mysql database

Question

I have this little click counter  I would like to include each click in a mysql table  Can anybody help   var count1   0  function countClicks1     count1   count1   1  document getElementById  p1   innerHTML   count1      document write   lt p gt     document write   lt a href  javascript countClicks1     gt Count lt  a gt     document write   lt  p gt      document write   lt p id  p1  gt 0 lt  p gt       Just in case anybody wants to see what I did   var count1   0  function countClicks1     count1   count1   1  document getElementById  p1   innerHTML   count1    function doAjax     ajax      type   POST      url   phpfile php      data   name name amp location location       success  function msg        alert   Data Saved      msg                 document write   lt  p gt     document write   lt a href  javascript countClicks1    doAjax     gt Count lt  a gt     document write   lt  p gt     document write   lt p id  p1  gt 0 lt  p gt       This is phpfile php which for testing purposes writes the data to a txt file   lt  php  name     POST  name     location     POST  location     myFile    test txt    fh   fopen  myFile   w   or die  can t open file    fwrite  fh   name   fwrite  fh   location   fclose  fh     gt

User · Answer

The other posters are correct you cannot connect to MySQL directly from javascript. This is because JavaScript is at client side & mysql is server side.

So your best bet is to use ajax to call a handler as quoted above if you can let us know what language your project is in we can better help you ie php/java/.net

If you project is using php then the example from Merlyn is a good place to start, I would personally use jquery.ajax() to cut down you code and have a better chance of less cross browser issues.

http://api.jquery.com/jQuery.ajax/

User · Answer

You will have to submit this data to the server somehow  I m assuming that you don t want to do a full page reload every time a user clicks a link  so you ll have to user XHR  AJAX   If you are not using jQuery  or some other JS library  you can read this tutorial on how to do the XHR request  by hand

User · Answer

JavaScript  as defined in your question  can t directly work with MySql  This is because it isn t running on the same computer  JavaScript runs on the client side  in the browser   and databases usually exist on the server side  You ll probably need to use an intermediate server-side language  like PHP  Java   Net  or a server-side JavaScript stack like Node js  to do the query  Here s a tutorial on how to write some code that would bind PHP  JavaScript  and MySql together  with code running both in the browser  and on a server  http   www w3schools com php php ajax database asp And here s the code from that page   It doesn t exactly match your scenario  it does a query  and doesn t store data in the DB   but it might help you start to understand the types of interactions you ll need in order to make this work  In particular  pay attention to these bits of code from that article  Bits of Javascript  xmlhttp open  quot GET quot   quot getuser php q  quot  str true   xmlhttp send     Bits of PHP code  mysql select db  quot ajax demo quot    con    result   mysql query  sql           row   mysql fetch array  result  mysql close  con    Also  after you get a handle on how this sort of code works  I suggest you use the jQuery JavaScript library to do your AJAX calls   It is much cleaner and easier to deal with than the built-in AJAX support  and you won t have to write browser-specific code  as jQuery has cross-browser support built in   Here s the page for the jQuery AJAX API documentation  The code from the article HTML Javascript code   lt html gt   lt head gt   lt script type  quot text javascript quot  gt  function showUser str    if  str   quot  quot         document getElementById  quot txtHint quot   innerHTML  quot  quot     return       if  window XMLHttpRequest        code for IE7   Firefox  Chrome  Opera  Safari   xmlhttp new XMLHttpRequest        else       code for IE6  IE5   xmlhttp new ActiveXObject  quot Microsoft XMLHTTP quot        xmlhttp onreadystatechange function         if  xmlhttp readyState  4  amp  amp  xmlhttp status  200            document getElementById  quot txtHint quot   innerHTML xmlhttp responseText            xmlhttp open  quot GET quot   quot getuser php q  quot  str true   xmlhttp send       lt  script gt   lt  head gt   lt body gt    lt form gt   lt select name  quot users quot  onchange  quot showUser this value  quot  gt   lt option value  quot  quot  gt Select a person  lt  option gt   lt option value  quot 1 quot  gt Peter Griffin lt  option gt   lt option value  quot 2 quot  gt Lois Griffin lt  option gt   lt option value  quot 3 quot  gt Glenn Quagmire lt  option gt   lt option value  quot 4 quot  gt Joseph Swanson lt  option gt   lt  select gt   lt  form gt   lt br   gt   lt div id  quot txtHint quot  gt  lt b gt Person info will be listed here  lt  b gt  lt  div gt    lt  body gt   lt  html gt   PHP code   lt  php  q   GET  quot q quot      con   mysql connect  localhost    peter    abc123    if    con        die  Could not connect      mysql error          mysql select db  quot ajax demo quot    con     sql  quot SELECT   FROM user WHERE id     quot   q  quot   quot     result   mysql query  sql    echo  quot  lt table border  1  gt   lt tr gt   lt th gt Firstname lt  th gt   lt th gt Lastname lt  th gt   lt th gt Age lt  th gt   lt th gt Hometown lt  th gt   lt th gt Job lt  th gt   lt  tr gt  quot    while  row   mysql fetch array  result         echo  quot  lt tr gt  quot     echo  quot  lt td gt  quot     row  FirstName      quot  lt  td gt  quot     echo  quot  lt td gt  quot     row  LastName      quot  lt  td gt  quot     echo  quot  lt td gt  quot     row  Age      quot  lt  td gt  quot     echo  quot  lt td gt  quot     row  Hometown      quot  lt  td gt  quot     echo  quot  lt td gt  quot     row  Job      quot  lt  td gt  quot     echo  quot  lt  tr gt  quot       echo  quot  lt  table gt  quot    mysql close  con     gt

[javascript] Send data from javascript to a mysql database

Examples related to javascript

Examples related to mysql