JavaScript, như được định nghĩa trong câu hỏi của bạn, không thể hoạt động trực tiếp với MySql. Điều này là do nó không chạy trên cùng một máy tính.
JavaScript chạy ở phía máy khách (trong trình duyệt) và cơ sở dữ liệu thường tồn tại ở phía máy chủ. Có thể bạn sẽ cần sử dụng ngôn ngữ phía máy chủ trung gian (như PHP, Java, .Net hoặc ngăn xếp JavaScript phía máy chủ như Node.js) để thực hiện truy vấn.
Đây là hướng dẫn về cách viết một số mã liên kết PHP, JavaScript và MySql với nhau, với mã chạy cả trong trình duyệt và trên máy chủ:
http://www.w3schools.com/php/php_ajax_database.asp
Và đây là mã từ trang đó. Nó không hoàn toàn phù hợp với kịch bản của bạn (nó thực hiện một truy vấn và không lưu trữ dữ liệu trong DB), nhưng nó có thể giúp bạn bắt đầu hiểu các loại tương tác bạn sẽ cần để thực hiện điều này.
Đặc biệt, hãy chú ý đến những đoạn mã này từ bài viết đó.
Các bit Javascript:
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
Các bit của mã PHP:
mysql_select_db("ajax_demo", $con);
$result = mysql_query($sql);
// ...
$row = mysql_fetch_array($result)
mysql_close($con);
Ngoài ra, sau khi bạn nắm được cách hoạt động của loại mã này, tôi khuyên bạn nên sử dụng thư viện JavaScript jQuery để thực hiện lệnh gọi AJAX của mình . Nó gọn gàng và dễ xử lý hơn nhiều so với hỗ trợ AJAX tích hợp và bạn sẽ không phải viết mã dành riêng cho trình duyệt, vì jQuery được tích hợp sẵn hỗ trợ nhiều trình duyệt. Đây là trang dành cho tài liệu jQuery AJAX API .
Mã từ bài viết
Mã 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>
Mã 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);
?>
