Gegevens van javascript naar een mysql-database verzenden

JavaScript, zoals gedefinieerd in uw vraag, kan niet rechtstreeks werken met MySql. Dit komt omdat het niet op dezelfde computer draait.

JavaScript draait aan de clientzijde (in de browser) en databases bestaan meestal aan de serverzijde. U zult waarschijnlijk een tussenliggende servertaal moeten gebruiken (zoals PHP, Java, .Net of een server-side JavaScript-stack zoals Node.js) om de query uit te voeren.

Hier is een zelfstudie over het schrijven van code die PHP, JavaScript en MySql samenbindt, met code die zowel in de browser als op een server wordt uitgevoerd:

http://www.w3schools.com/php/php_ajax_database.asp

En hier is de code van die pagina. Het komt niet precies overeen met uw scenario (het voert een query uit en slaat geen gegevens op in de DB), maar het kan u misschien helpen om de soorten interacties te begrijpen die u nodig hebt om dit te laten werken.

Let vooral op deze stukjes code uit dat artikel.

Stukjes Javascript:

xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();

Stukjes PHP-code:

mysql_select_db("ajax_demo", $con);
$result = mysql_query($sql);
// ...
$row = mysql_fetch_array($result)
mysql_close($con);

Nadat je weet hoe dit soort code werkt, raad ik je aan de jQuery JavaScript-bibliotheek te gebruiken om je AJAX-aanroepen te doen . Het is veel overzichtelijker en gemakkelijker om mee om te gaan dan de ingebouwde AJAX-ondersteuning, en u hoeft geen browserspecifieke code te schrijven, aangezien jQuery ondersteuning voor meerdere browsers heeft ingebouwd. Hier is de pagina voor de jQuery AJAX API-documentatie .

De code uit het artikel

HTML/Javascript-code:

<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-code:

<?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);
?>