Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
XMLHttpRequest
#1
Hallo zusammen,

ich fange gerade mit Html/php/JS an und bastel mit gerade mit einer mysql Datenbank für mich daheim eine kleine interne Homepage auf und hänge gerade an einem Problem.

Ich würde gerne über dropdowns im browser daten auswählen mit unterauswahlmöglichkeiten in mehreren dropdowns und dann ein Ergebnis anzeigen lassen. Wobei die Select Auswahlmöglichkeiten von dem jeweiligen Feld voher abhängen.
Also zum Beispiel soll es so aussehen.

Code:
<select name="Feld1">
    <option>a</option>        
    <option">b</option>
</select>

<select name="Feld2"></select>

<select name="Feld3"></select>

Wobei die Auswahl von Feld1 die von Feld2 beeinflußt und Feld 3 wird von Feld1 und Feld2 beeinflußt.

Ich bin gerade dabei mir das ganze zusammen zu bauen/suchen und habe bisher folgenden Code.

Meine Index.php

Code:
<?php require("header.php"); ?>

          <div id="content">
            <h1>Eingabe Nachweis</h1>
        
        <script>
        function getinfo(str) {
          if (str == "") {
            document.getElementById("db_mat_ano_bez").innerHTML = "";
            return;
          } else {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
                document.getElementById("db_mat_ano_bez").innerHTML = this.responseText;                
              }
            };
            xmlhttp.open("GET","info_ziehen.php?q="+str,true);
            xmlhttp.send();            
          }
        }
        </script>    

        // Verbindung herstellen zum Server
        include "connectdb.php";
        $mysqli = $conn;  // Aus der connectdb.php

        $sql_mat_anode = "SELECT * FROM artikel_id WHERE Material='Anodenfolie'";
        $all_category_mat_anode = mysqli_query($mysqli,$sql_mat_anode);    

                    <th><input type="text" name="Mat_anode_art" ></th>
                    <th><select id="Mat_anode_hersteller" name="Mat_anode_hersteller" onchange="getinfo(this.value)"  required>
                                <?php
                                    while ($category_mat_anode = mysqli_fetch_array(
                                            $all_category_mat_anode,MYSQLI_ASSOC)):;
                                        ?>
                                    <option value="<?php echo $category_mat_anode["Lieferant"];
                                        ?>">
                                        <?php echo $category_mat_anode["Lieferant"];
                                        ?>
                                        </option>
                                        <?php
                                    endwhile;
                                ?>
                        </select>

<div id="db_mat_ano_bez" name="Mat_anode_bezeichnung">Bitte Hersteller wählen</div>

<div id="db_mat_ano_art" name="Mat_anode_artikelnr">Bitte Hersteller wählen</div>

Die php Datei info_ziehen.php sieht folgendermaßen aus:
PHP-Code:
<!DOCTYPE html>
<
html>
<
body>

<?
php
$q 
$_GET['q'];

        include 
"connectdb.php";  //database connection

if (!$conn) {
  die('Could not connect: ' mysqli_error($conn));
};
$sql="SELECT * FROM artikel_id WHERE Material='Anodenfolie' and Lieferant = '".$q."' ";
$result1 mysqli_query($conn,$sql);
?>




<select id="db_mat_ano_bez"   >
  <option value="">Bitte auswählen:</option>
<?php 
                
while ($category1 mysqli_fetch_array(
                        $result1,MYSQLI_ASSOC)):; 
            ?>
                <option value="<?php echo $category1["Bezeichnung / Beschreibung"];?>">
                    <?php echo $category1["Bezeichnung / Beschreibung"];
                    ?>
                </option>
            <?php 
                
endwhile; 
            ?>
  </select>

<?php
mysqli_close
($conn)
?>
</body>
</html> 

Nun verstehe ich nicht, wie mir die info_ziehen.php mehr als einen Wert zurückgeben kann, um die beiden Felder in der in der Index.php zu füllen.
Mit einem Wert klappt es um die id="db_mat_ano_bez" zu befüllen, bei mehreren leider  nicht . Da verstehe ich den Ablauf zu wenig. 

Hoffe mir kann jemand erklären wie ich das ausbauen/besser aufbauen kann.

Danke euch.
Zitieren
#2
Ist das noch aktuell ?
Wahr längere Zeit nicht mehr online.

Man muss ja theoretisch bei jeden ändern der Felder , egal ob 1,2 oder 3 die Werte Auslesen und ans Php Script senden , der dann die möglichen Angaben da wieder einfügt.
Ich würde da auch mit JSON arbeiten was meiner Meinung nach Einfacher wäre
Zitieren
#3
Ich weiß nicht ob ich den Post hier richtig verstanden habe aber hier meine Version:

Code:
'use strict';
document.addEventListener('DOMContentLoaded', init);
var feld1, feld2, feld3;
function init() {
    feld1 = document.getElementsByName('feld1')[0];
    feld2 = document.getElementsByName('feld2')[0];
    feld3 = document.getElementsByName('feld3')[0];
    feld2.setAttribute('readonly', 'readonly');
    feld2.style.display = 'none';
    feld3.setAttribute('readonly', 'readonly');
    feld3.style.display = 'none';
    feld1.addEventListener('input', feld1F);
}
function feld1F() {
    let xhr = new XMLHttpRequest();
    let myFormData = new FormData();
    myFormData.append('feld1', feld1.value);
    xhr.open('POST', 'meinPHP.php');
    xhr.addEventListener('readystatechange', () => {
        if(this.status==200 && this.readyState==4) {
            currentContent = xhr.responseText;
            feld1.setAttribute('readonly', 'readonly');
            feld2.innerHTML = currentContent;           
            feld2.addEventListener('input', feld2F);
        }
    });
    xhr.send(myFormData);
}
function feld2F() {
    let xhr = new XMLHttpRequest();
    let myFormData = new FormData();
    myFormData.append('feld2', feld2.value);
    xhr.open('POST', 'meinPHP.php');
    xhr.addEventListener('readystatechange', () => {
        if(this.status==200 && this.readyState==4) {
            currentContent = xhr.responseText;
            feld2.setAttribute('readonly', 'readonly');
            feld3.innerHTML = currentContent;           
            feld3.addEventListener('input', feld2F);
        }
    });
    xhr.send(myFormData);
}
function feld3F() {
    let xhr = new XMLHttpRequest();
    let myFormData = new FormData();
    myFormData.append('feld3', feld3.value);
    xhr.open('POST', 'meinPHP.php');
    xhr.addEventListener('readystatechange', () => {
        if(this.status==200 && this.readyState==4) {
            currentContent = xhr.responseText;
            // Hier kommt der Rest hin usw.
        }
    });
    xhr.send(myFormData);
}

Code:
<?php
require_once('datenbank.php');
if(!$link) {
    die('Keine Datenbankanbindung!');
}
$ausgabe = "";
if(isset($_POST['q']) && $_POST['q']!='') {
    $q = htmlsepcialchars($_POST['q'], ENT_QUOTES);
    $query="SELECT * FROM `artikel_id` WHERE `Material`='Anodenfolie' and Lieferant=?";
    if($stmt = $link->prepare($query)) {
        $stmt->bind_param();
        $stmt->execute();
        if($result = $stmt->get_result()) {
            while($row = $result->fetch_array(MYSQLI_BOTH)) {
                $ausgabe .= "\t<option ";
                $ausgabe .= "name=\"" . $row['Bezeichnung'] . "\">";
                $ausgabe .= $row['Beschreibung'] . "</option>\n";
            }
            echo $ausgabe;
        }
    }
}
?>

Aus Sicherheitsgründen solltest du $_POST und $_GET immer validieren und gebenfalls escapen. Es kann nicht ausgeschlossen werden, dass der Besucher der Webseite versucht via Codeinjection deine Seite zu beschädigen oder Daten abzugreifen. Dazu solltest du in PHP Prepared Statements verwenden. Das macht das ganze sicherer von Angriffen von Außen. SQL-Injections sind sehr böse und können Inhalte abgreifen und/oder zerstören.

Es gibt hier noch mehr Sicherheitsmechanismen und Sicherheitslösungen, um PHP noch sicherer machen könnte, aber das würde den Rahmen des Threeads hier sprengen.

Ich hoffe der Code hilft dir weiter bei deiner Arbeit. Viel Erfolg!

VG rzscout
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste