Schnittstelle MySQL und JavaScript Ajax

Hallo zusammen,

ich habe auf einem Webserver unter phpmyadmin eine Datenbank laufen mit Artikeln.
Wie kann ich die Verbindung zu der Datenbank herstellen nur mit JavaScript, JQuery oder Ajax?
PHP kann nur auf dem Webserver laufen. Leider nicht in der OnlineAnwendung wo ich Html, Java und CSS verwenden kann.
Ich habe etwas von HttpXMLRequest gelesen, kann mir jemand Tipps dazu geben?

Ich möchte gerne die Daten aus der Datenbank in einem dynamischen Formular anzeigen und verwenden.

Beispiel:
Datenbank -> Artikel läuft auf dem Webserver unter PHPmyadmin
PHP kann nur auf dem Server verwendet werden.

In einer AppAnwendung kann ich nur HTML, CSS und JavaScript benutzen.

Ich möchte mir in einem Formular nach bestimmten Kriterien gerne die Daten aus der DB (Artikel) anzeigen lassen und weiter filtern.

Optionsfeld mit Artikeltyp

Wenn bestimmter Artikeltyp ausgewählt wurde, dann sollen nur Artikel mit dem jeweiligen Typ angezeigt werden.

Wenn man den Artikeltyp wieder rausnimmt, soll er wieder alle Artikel anzeigen.

Wenn man einen bestimmten Artikeltyp ausgewählt hat, soll durch weitere Optionsfeldern weiter gefiltert werden.

Ich bräuchte nur Hilfe bei der Verarbeitung der Daten.
Was brauche ich genau und wo ist der Unterschied zu Ajax, JavaScript, JQuery, Json, Node.js etc.

Worauf muss ich mich konzentrieren damit ich mich informieren kann? Ich weiß nicht wonach ich suchen muss.

Danke

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 581343

Url: https://administrator.de/forum/schnittstelle-mysql-und-javascript-ajax-581343.html

Ausgedruckt am: 22.12.2024 um 16:12 Uhr

3 Kommentare

Neuester Kommentar

Moin,
1. phpmyadmin ist keine Datenbank, sondern nur ein Frontend.
2. Du brauchst PHP und Javascript. PHP liest die Daten aus der Datenbank und per Javascript gibst du diese aus.
3. AJAX ist eine Möglichkeit für asynchrones Laden von Inhalten.
4. JSON ist eine standardisierte Möglichkeit, die Daten aus dem PHP-Backend ins Javascript-Frontend zu übertragen.

Gute Tutorials dazu findest du auch bei W3Schools

VG

So ich habe mal meinen ersten Versuch gestartet und folgendes erstellt.

Auf meinem Webserver habe ich eine getuser.php angelegt die dort verarbeitet werden kann:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border-collapse: collapse;
}

table, td, th {
  border: 1px solid black;
  padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = intval($_GET['q']);  

$con = mysqli_connect('x','x','x','x');  
if (!$con) {
  die('Could not connect: ' . mysqli_error($con));  
}

mysqli_select_db($con,"ajax_demo");  
$sql="SELECT * FROM user WHERE id = '".$q."'";  
$result = mysqli_query($con,$sql);

echo "<table>  
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";  
while($row = mysqli_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>";  
mysqli_close($con);
?>
</body>
</html> 

Danach habe ich die index.html aufgebaut:

<html>
<head>
<script>
function showUser(str) {
  if (str == "") {  
    document.getElementById("txtHint").innerHTML = "";  
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.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">Joseph Swanson</option>  
  <option value="4">Glenn Quagmire</option>  
  </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>  

</body>
</html> 

Wenn ich beide Dateien auf meinem Webserver habe, klappt das einwandfrei.
Nun habe ich aber das Problem das ich die index.html von woanders (in einem AppBaustein) ausführe und nun würde ich gerne auf die PHP-Datei getuser.php auf dem Server zugreifen.

Jetzt dachte ich, ich könnte einfach den Pfad dazu ändern:
Anstatt:

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

Dann:

xmlhttp.open("GET","http://www.xxx.com/getuser.php?q="+str,true);

Leider funktioniert das so wohl nicht.
Was habe ich falsch gemacht?

Die meisten Browser blocken Cross-Site-Scripts, da diese ein Sicherheitsrisiko darstellen.
So wird das also eher nix...

Schau mal hier: https://developer.chrome.com/extensions/xhr

Frage Webentwicklung Entwicklung

Mehr von MrRoyal

Chrome Browser ständiger Absturz - automatische WiederherstellungMrRoyal - 2 Kommentare

Tool für Endpoint ProtectionMrRoyal - 18 Kommentare

Dateien automatisch auf Fileserver übertragenMrRoyal - 13 Kommentare

Email Datei-Pool eingehender AnhängeMrRoyal - 4 Kommentare

Heiß diskutiert