Nun, was Sie wirklich brauchen, ist ein AJAX-Aufruf, mit dem Sie mit dem Server kommunizieren können, ohne eine Seite neu zu laden. Alles, was Sie tun müssen, ist im Grunde eine neue HTTP-Anfrage mit einem Länderparameter zu senden, um die Liste der Städte darin zu erhalten. Der richtige Weg wäre, nur die Daten (Städte) im JSON- oder ähnlichen Format zu senden (HTTP-Antwort), und nicht auch deren Präsentation (HTML), aber der Einfachheit halber können Sie so weiterarbeiten, wie Sie begonnen haben (Daten mit HTML zurückgeben). .
Beginnen Sie damit, den Code, der HTML-SelectBoxOptions von Städten generiert, in einem anderen Skript zu trennen. Sie verwenden dieses Skript, um die Liste der Städte in einem bestimmten Land mithilfe von AJAX (XMLHttpRequest-Bibliothek) abzurufen.
Schauen Sie sich das an, es ist eine funktionierende Lösung Ihres Problems. Die HTTP-Anforderung wird gesendet, wenn der Benutzer die Option countrySelectBox ändert, auf diese Weise wird das Auswahlfeld für Ihre Städte jedes Mal aktualisiert, wenn es erforderlich ist 2. Codeblock in separates Skript).
<!DOCTYPE html>
<html>
<head>
<script>
function populateCities(citiesSelectBoxOptions){
document.getElementById("city").innerHTML = citiesSelectBoxOptions;
}
function httpGetAsync(theUrl, callback)
{
alert(theUrl);
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
</script>
</head>
<body>
<select name="country" id="country" onchange="httpGetAsync('www.yourdomain.com/getCities.php?country=' + this.options[this.selectedIndex].value, populateCities)">
<option value="Country1">Country 1</option>
<option value="Country2">Country 2</option>
</select>
<select name="city" id="city">
</select>
</body>
</html>
getCities.php
<?php
$db = pg_connect("$db_host $db_name $db_username $db_password");
$selectedCountry = $_GET['country'];
$query = "SELECT city FROM cities where country = ' $selectedCountry '";
$result = pg_query($query);
if (!$result) {
echo "Problem with query " . $query . "<br/>";
echo pg_last_error();
exit();
}
printf ("<option value='Select'>Select a City</option>");
while($myrow = pg_fetch_assoc($result)) {
printf ("<option value='$myrow[city]'>$myrow[city]</option>");
}
?>
BEARBEITEN:
httpGetAsync ist eine native (nur reines/Vanille-Javascript wird verwendet. Es werden keine anderen Bibliotheken verwendet) Javascript-Funktion, mit der Sie eine HTTP-Anfrage senden können, ohne eine Seite neu zu laden. Wie ich sehe, verwenden Sie jQuery, das die Komplexität dieser Funktion verbirgt, genau wie form->submit, aber ich empfehle Ihnen, sich mit der Funktionsweise von httpGetAsync vertraut zu machen, da die Verwendung einer jQuery für eine so einfache Aufgabe zu viel des Guten ist.
Sie benötigen diese Javascript-Funktion nicht
function getCity(countryId)
Stattdessen sollten Sie Ihren Code, der mit der Datenbank kommuniziert, in eine .php-Datei einfügen, nicht in Javascript (denken Sie daran, dass Javascript eine Client-Seite ist, es wird auf dem Client-Computer ausgeführt, z. B. im Browser, während PHP auf dem Server ausgeführt wird). Ihr SQL sollte niemals in Javascript geschrieben sein. Clientseitiger Code kann nicht direkt mit einer Datenbank kommunizieren, sondern nur über serverseitige Codierung. Um dies zu erreichen, müssen Sie einen Wert des PHP-Skripts getCities.php als HTTP-Antwort an den Client (Javascript) zurückgeben.
Wenn Sie eine HTTP-Anforderung an eine .php-Datei senden, wird dieses Skript auf einem Server ausgeführt, und alles, was Sie am Ende des Skripts "echo" oder "print" gesagt haben, wird automatisch als HTTP-Antwort gesendet. Sie müssen keinen Code schreiben, um eine HTTP-Antwort zu senden. Es wird automatisch erledigt. Sie müssen nur auf der Clientseite wiederholen/drucken, was Sie brauchen. In Ihrem Fall müssen Sie Optionen für ein bestimmtes Land drucken.
Woher weiß das Skript, für welches Land es Städte aus der Datenbank auswählen muss? Nun, Sie senden eine HTTP-Anfrage mit einem Parameter "Land". Das macht Ihr Formular automatisch, wenn Sie es absenden. Alle HTML-Tags, die sich in Form befinden und ein Namensattribut haben, werden in einer HTTP-Anforderung als Parameter gesendet. Da Sie aber die Submit-Funktion nicht verwenden können, müssen Sie dies manuell tun.
Das Senden eines Parameters innerhalb einer HTTP-GET-Anforderung ist sehr einfach. Sehen Sie sich die folgende URL an:
localhost/getCities?country=countryX&someOtherParam=something&myThirdParam=something3
Auf der Serverseite werden die folgenden Variablen gefüllt:
$_GET["country"] // value is 'countryX'
$_GET["someOtherParam"] // value is 'something'
$_GET["myThirdParam"] // value is 'something3'
Um mehr darüber zu erfahren, wie GET und POST funktionieren und was der Unterschied ist, lesen Sie dies
Beginnen Sie mit dem Erstellen einer getCities.php-Datei und kopieren Sie den Code, der mit der Datenbank kommuniziert und Stadtoptionen generiert, und fügen Sie ihn ein. Es ist im Grunde das, was Sie bereits getan haben, Sie müssen diesen Code nur in eine separate .php-Datei einfügen. Wenn also ein Client (Browser) nach einer Liste von Städten in einem bestimmten Land fragt, senden Sie eine HTTP-Anfrage (unter Verwendung der Funktion httpGetAsync()), um diese Liste vom Server abzurufen.
Fügen Sie dieses Skript in Ihre index.php-Kopie ein
<script>
function populateCities(citiesSelectBoxOptions){
document.getElementById("city").innerHTML = citiesSelectBoxOptions;
}
function httpGetAsync(theUrl, callback)
{
alert(theUrl);
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
</script>
Setzen Sie als Nächstes das onchange-Attribut in das Auswahlfeld, denken Sie daran, es ist alles in Kleinbuchstaben, nicht onChange.
<select name="country" id="country" onchange="httpGetAsync('localhost/getCities?country=' + this.value, populateCities)">
Bei Fragen einfach fragen... :)
