JavaScript, jak je definován ve vaší otázce, nemůže přímo pracovat s MySql. Je to proto, že neběží na stejném počítači.
JavaScript běží na straně klienta (v prohlížeči) a databáze obvykle existují na straně serveru. K provedení dotazu budete pravděpodobně muset použít přechodný jazyk na straně serveru (jako PHP, Java, .Net nebo zásobník JavaScriptu na straně serveru, jako je Node.js).
Zde je návod, jak napsat nějaký kód, který by spojil PHP, JavaScript a MySql dohromady, s kódem spuštěným v prohlížeči i na serveru:
http://www.w3schools.com/php/php_ajax_database.asp
A tady je kód z té stránky. Neodpovídá přesně vašemu scénáři (provádí dotaz a neukládá data do DB), ale může vám pomoci začít porozumět typům interakcí, které budete potřebovat, aby to fungovalo.
Zejména věnujte pozornost těmto kouskům kódu z tohoto článku.
Kousky Javascriptu:
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
Bity kódu PHP:
mysql_select_db("ajax_demo", $con);
$result = mysql_query($sql);
// ...
$row = mysql_fetch_array($result)
mysql_close($con);
Poté, co se seznámíte s tím, jak tento druh kódu funguje, doporučuji vám použít knihovnu jQuery JavaScript k volání AJAX . Je mnohem čistší a snáze se s ním pracuje než s vestavěnou podporou AJAX a nebudete muset psát kód specifický pro prohlížeč, protože jQuery má integrovanou podporu pro více prohlížečů. Zde je stránka pro dokumentace jQuery AJAX API .
Kód z článku
Kód 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 kód:
<?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);
?>