Отправка данных из javascript в базу данных mysql

У меня есть этот маленький счетчик кликов. Я хотел бы включить каждый клик в таблицу mysql. Может ли кто-нибудь помочь?

var count1 = 0;
function countClicks1() {
count1 = count1 + 1;
document.getElementById("p1").innerHTML = count1;
}


document.write('<p>');
document.write('<a href="javascript:countClicks1();">Count</a>');
document.write('</p>');

document.write('<p id="p1">0</p>');

На всякий случай кто-то хочет посмотреть, что я сделал:

var count1 = 0;
function countClicks1() {
count1 = count1 + 1;
document.getElementById("p1").innerHTML = count1;
}
function doAjax()
$.ajax({
   type: "POST",
   url: "phpfile.php",
   data: "name=name&location=location",
    success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });
}

document.write('</p>');
document.write('<a href="javascript:countClicks1(); doAjax();">Count</a>');
document.write('</p>');
document.write('<p id="p1">0</p>');

Это phpfile.php, который для целей тестирования записывает данные в файл txt

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

Ответы

Ответ 1

JavaScript, как определено в вашем вопросе, не может напрямую работать с MySql. Это потому, что он не работает на том же компьютере.

JavaScript выполняется на стороне клиента (в браузере), а базы данных обычно существуют на стороне сервера. Вам, вероятно, понадобится использовать промежуточный серверный язык (например, PHP, Java,.Net или серверный стек JavaScript, такой как Node.js), чтобы выполнить запрос.

Вот учебник о том, как написать некоторый код, который связывал бы PHP, JavaScript и MySql вместе с кодом, выполняющимся как в браузере, так и на сервере:

http://www.w3schools.com/php/php_ajax_database.asp

И вот код с этой страницы. Он не совсем соответствует вашему сценарию (он выполняет запрос и не хранит данные в БД), но может помочь вам начать понимать типы взаимодействий, которые вам понадобятся для выполнения этой работы.

В частности, обратите внимание на эти фрагменты кода из этой статьи.

Биты Javascript:

xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();

Биты PHP-кода:

mysql_select_db("ajax_demo", $con);
$result = mysql_query($sql);
// ...
$row = mysql_fetch_array($result)
mysql_close($con);

Кроме того, после того, как вы узнаете, как работает этот вид кода, я предлагаю вам использовать библиотеку jQuery JavaScript для выполнения ваших вызовов AJAX. С ним гораздо проще и проще работать, чем со встроенной поддержкой AJAX, и вам не придется писать код, специфичный для браузера, поскольку в jQuery встроена межбраузерная поддержка. Вот страница документации по API JQuery AJAX.

Код из статьи

HTML/Javascript код:

<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>

Код PHP:

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM user WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo "<td>" . $row['Age'] . "</td>";
  echo "<td>" . $row['Hometown'] . "</td>";
  echo "<td>" . $row['Job'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>

Ответ 2

Вам придется как-то отправить эти данные на сервер. Я предполагаю, что вы не хотите переполнять всю страницу каждый раз, когда пользователь щелкает ссылку, поэтому вам придется использовать XHR (AJAX). Если вы не используете jQuery (или какую-либо другую JS-библиотеку), вы можете прочитать этот учебник о том, как выполнить запрос XHR "вручную".

Ответ 3

Другие плакаты верны, вы не можете подключиться к MySQL непосредственно из javascript. Это связано с тем, что JavaScript находится на стороне клиента, а mysql - на стороне сервера.

Итак, лучше всего использовать ajax для вызова обработчика, как указано выше, если вы можете сообщить нам, на каком языке ваш проект находится, мы можем вам лучше помочь, т.е. php/java/.net

Если вы планируете использовать php, тогда пример из Merlyn - это хорошее место для начала, я бы лично использовал jquery.ajax(), чтобы вырезать ваш код и иметь больше шансов на меньшее перекрестные проблемы браузера.

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