JavaScript, seperti yang didefinisikan dalam pertanyaan Anda, tidak dapat langsung bekerja dengan MySql. Ini karena tidak berjalan di komputer yang sama.
JavaScript berjalan di sisi klien (di browser), dan database biasanya ada di sisi server. Anda mungkin perlu menggunakan bahasa sisi server perantara (seperti PHP, Java, .Net, atau tumpukan JavaScript sisi server seperti Node.js) untuk melakukan kueri.
Berikut adalah tutorial tentang cara menulis beberapa kode yang akan mengikat PHP, JavaScript, dan MySql bersama-sama, dengan kode yang berjalan baik di browser, dan di server:
http://www.w3schools.com/php/php_ajax_database.asp
Dan inilah kode dari halaman itu. Ini tidak sama persis dengan skenario Anda (melakukan kueri, dan tidak menyimpan data dalam DB), tetapi mungkin membantu Anda mulai memahami jenis interaksi yang Anda perlukan agar ini berfungsi.
Secara khusus, perhatikan potongan kode dari artikel tersebut.
Potongan Javascript:
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
Bit kode PHP:
mysql_select_db("ajax_demo", $con);
$result = mysql_query($sql);
// ...
$row = mysql_fetch_array($result)
mysql_close($con);
Juga, setelah Anda memahami cara kerja kode semacam ini, saya sarankan Anda menggunakan perpustakaan JavaScript jQuery untuk melakukan panggilan AJAX Anda . Ini jauh lebih bersih dan lebih mudah untuk ditangani daripada dukungan AJAX bawaan, dan Anda tidak perlu menulis kode khusus browser, karena jQuery memiliki dukungan lintas-browser bawaan. Inilah halaman untuk dokumentasi jQuery AJAX API .
Kode dari artikel
Kode 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>
Kode 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);
?>
