JavaScript, som defineret i dit spørgsmål, kan ikke fungere direkte med MySql. Dette er fordi det ikke kører på den samme computer.
JavaScript kører på klientsiden (i browseren), og databaser findes normalt på serversiden. Du skal sandsynligvis bruge et mellemsprog på serversiden (såsom PHP, Java, .Net eller en JavaScript-stak på serversiden som Node.js) for at udføre forespørgslen.
Her er en vejledning i, hvordan man skriver noget kode, der binder PHP, JavaScript og MySql sammen, med kode, der kører både i browseren og på en server:
http://www.w3schools.com/php/php_ajax_database.asp
Og her er koden fra den side. Det matcher ikke nøjagtigt dit scenarie (det udfører en forespørgsel og gemmer ikke data i databasen), men det kan hjælpe dig med at begynde at forstå, hvilke typer interaktioner du skal bruge for at få dette til at fungere.
Vær især opmærksom på disse stykker kode fra den artikel.
Bits af Javascript:
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
Bits PHP-kode:
mysql_select_db("ajax_demo", $con);
$result = mysql_query($sql);
// ...
$row = mysql_fetch_array($result)
mysql_close($con);
Når du har fået styr på, hvordan denne slags kode fungerer, foreslår jeg, at du bruger jQuery JavaScript-biblioteket til at foretage dine AJAX-opkald . Det er meget renere og nemmere at håndtere end den indbyggede AJAX-understøttelse, og du behøver ikke at skrive browserspecifik kode, da jQuery har indbygget cross-browser-understøttelse. Her er siden for jQuery AJAX API-dokumentationen .
Koden fra artiklen
HTML/Javascript-kode:
<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-kode:
<?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);
?>