Mysql
 sql >> Base de données >  >> RDS >> Mysql

Envoyer des données de javascript vers une base de données mysql

JavaScript, tel que défini dans votre question, ne peut pas fonctionner directement avec MySql. C'est parce qu'il ne s'exécute pas sur le même ordinateur.

JavaScript s'exécute côté client (dans le navigateur) et les bases de données existent généralement côté serveur. Vous devrez probablement utiliser un langage intermédiaire côté serveur (comme PHP, Java, .Net ou une pile JavaScript côté serveur comme Node.js) pour effectuer la requête.

Voici un tutoriel sur la façon d'écrire du code qui lierait PHP, JavaScript et MySql ensemble, avec du code s'exécutant à la fois dans le navigateur et sur un serveur :

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

Et voici le code de cette page. Cela ne correspond pas exactement à votre scénario (il effectue une requête et ne stocke pas de données dans la base de données), mais cela pourrait vous aider à commencer à comprendre les types d'interactions dont vous aurez besoin pour que cela fonctionne.

En particulier, faites attention à ces morceaux de code de cet article.

Des bouts de Javascript :

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

Morceaux de code PHP :

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

De plus, après avoir compris comment fonctionne ce type de code, je vous suggère d'utiliser la bibliothèque jQuery JavaScript pour effectuer vos appels AJAX . C'est beaucoup plus propre et plus facile à gérer que le support AJAX intégré, et vous n'aurez pas à écrire de code spécifique au navigateur, car jQuery a un support inter-navigateurs intégré. Voici la page pour la documentation de l'API jQuery AJAX .

Le code de l'article

Code 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>

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