JavaScript, enligt definitionen i din fråga, kan inte direkt fungera med MySql. Detta beror på att det inte körs på samma dator.
JavaScript körs på klientsidan (i webbläsaren), och databaser finns vanligtvis på serversidan. Du måste förmodligen använda ett mellanspråk på serversidan (som PHP, Java, .Net eller en JavaScript-stack på serversidan som Node.js) för att göra frågan.
Här är en handledning om hur man skriver kod som skulle binda PHP, JavaScript och MySql tillsammans, med kod som körs både i webbläsaren och på en server:
http://www.w3schools.com/php/php_ajax_database.asp
Och här är koden från den sidan. Det matchar inte exakt ditt scenario (det gör en fråga och lagrar inte data i DB), men det kan hjälpa dig att börja förstå vilka typer av interaktioner du behöver för att få det här att fungera.
Var särskilt uppmärksam på dessa kodbitar från den artikeln.
Bitar av Javascript:
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
Bitar av PHP-kod:
mysql_select_db("ajax_demo", $con);
$result = mysql_query($sql);
// ...
$row = mysql_fetch_array($result)
mysql_close($con);
När du har fått grepp om hur den här typen av kod fungerar föreslår jag att du använder jQuery JavaScript-biblioteket för att göra dina AJAX-anrop . Det är mycket renare och lättare att hantera än det inbyggda AJAX-stödet, och du behöver inte skriva webbläsarspecifik kod, eftersom jQuery har inbyggt stöd för flera webbläsare. Här är sidan för dokumentationen för jQuery AJAX API .
Koden från artikeln
HTML/Javascript-kod:
<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-kod:
<?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);
?>