2 kleine Probleme mit JS und PHP

  • Hallo zusammen,

    Ich habe 2 kleinere Probleme mit dem folgendem Code. Ich benutze event listener um durch einen click jeweils zwei Funktionen aufzurufen. Durch click auf den button suchen müsste zumindest der Tabelleninhalt vorest gelöscht werden, doch danach wird scheinbar die Seite nochmal aufgerufen, verstehe aber nicht wieso.

    Meine zweite Frage ist wie kann ich diese Funktion aufrufen. Da muss noch irgendwas falsch sein :

    PHP
    var php_output = "<?php extern_function()?>";

    damit sollen die Einträge nach preis sortiert werden. Hier nochmal der ganze Code:

    <html>

    <head>

    <style>

    th,table {

    border: solid 1px

    }

    </style>

    </head>


    <form>

    Preis bis: <input type="number" min="1" name="preis">

    <button id="button_search">

    Suche

    </button>

    </form>

    <table>

    <thead>

    <tr>

    <!-- <th>Objekt</th>

    <th>Stadtteil</th> -->

    <th>Ort</th>

    <th>Preis <button id="btn_sort">sort</button></th>

    <!-- <th>umlagef. Kosten</th>

    <th>nicht umlagefähige Kosten</th>-->

    </tr>

    </thead>

    <tbody id="test_table">


    </tbody>

    </table>





    </html>



    <?php

    $servername = "localhost";

    $username = "root";

    $password = "";

    $dbname = "immobilien";


    // Create connection

    $conn = new mysqli($servername, $username, $password, $dbname);

    // Check connection

    if ($conn->connect_error) {

    die("Connection failed: " . $conn->connect_error);

    }


    $sql = "SELECT * FROM mydb";

    $result = $conn->query($sql);


    if ($result->num_rows > 0) {

    // output data of each row

    while($row = $result->fetch_assoc()) {

    echo "stadt: " . $row["Stadt"]. "<br>";

    $output[]=$row;

    }

    } else {

    echo "0 results";

    }


    // Json Output

    print(json_encode($output,JSON_UNESCAPED_UNICODE));



    $conn->close();

    ?>




    <script type="text/javascript">

    // pass PHP variable declared above to JavaScript variable

    var output = <?php echo json_encode($output) ?>;


    </script>


    <html>

    <div id="test"></div>

    </html>


    <script>

    var button_sort =document.getElementById('btn_sort')


    button_sort.addEventListener('click', function(){

    test.innerHTML = "";

    /*var php_output = "<php extern_function(); ?>"

    for(var x=0;x<output.length;x++){

    console.log(x)

    console.log(output[x].Stadt)

    test.innerHTML += "<tr> <td>" + output[x].Stadt +"</td><td>"+ output[x].preis + "</td> " + "</tr>"


    }*/


    })


    const test = document.getElementById('test_table');

    for(var x=0;x<output.length;x++){

    console.log(x)

    console.log(output[x].Stadt)

    test.innerHTML += "<tr> <td>" + output[x].Stadt +"</td><td>"+ output[x].preis + "</td> " + "</tr>"

    }



    var button_search =document.getElementById('button_search')

    button_search.addEventListener('click', function(){

    test.innerHTML = "";

    /* search_preis_bis = document.querySelector('input[name="preis"]')

    console.log(search_preis_bis)*/


    })


    </script>


    <?php

    function extern_php()

    {

    $servername = "localhost";

    $username = "root";

    $password = "";

    $dbname = "immobilien";


    // Create connection

    $conn = new mysqli($servername, $username, $password, $dbname);

    // Check connection

    if ($conn->connect_error) {

    die("Connection failed: " . $conn->connect_error);

    }

    $result = [];

    $sql = "SELECT * FROM mydb ORDER BY preis ASC";

    $result = $conn->query($sql);


    if ($result->num_rows > 0) {

    // output data of each row

    while($row = $result->fetch_assoc()) {

    echo "stadt: " . $row["Stadt"]. "<br>";

    $output[]=$row;

    }

    } else {

    echo "0 results";

    }


    // Json Output

    print(json_encode($output,JSON_UNESCAPED_UNICODE));



    $conn->close();

    }





    ?>

  • Deine Seite wird neu aufgerufen weil du Deinen Button innerhalb einer form hast.

    Ein button hat ein Attribut type, Standart ist dort submit (z.b. wenn man das nicht angibt), d.h. wenn der Knopf gedrückt wird, wird unabhängig von Deinem Eventlistener das Formular abgeschickt, in Deinem Fall also die Seite neu geladen.


    Der zweite Punkt ist komplizierter:

    PHP und JavaScript sind total unterschiedliche Konzepte. JavaScript läuft auf Deinem Rechner im Browser, PHP auf dem Server. Du kannst nicht auf diese Art aus Deinem Browser hinaus eine PHP Funktion aufrufen. Dazu musst du einene Request an den Server senden. Das Stichwort dazu ist AJAX oder Fetch API.

    Generell empfielt es sich nicht PHP und JavaScript zu mischen sondern das komplett zu trennen. Erstelle eine separate JavaScript-Datei mit Deinem JavaScript-Code und hole diese Datei über den <script>-Tag in Dein Dokument.

    1. Verwende doch bitte auch für den Restcode die Code-Tags, nicht nur eine Zeile.
    2. Wenn du PHP-Code in Anführungszeichen setzt, wird er nicht "ausgeführt". Auch musst du bischen auf die Rückgabe der Funktion achten, welche du der JS-Variablen anhängen willst...
    3. Es ist echt kein schöner Codestil und auch nicht schön anzusehen, wie du HTML, CSS, JS & PHP in einer Datei unterbringst!
  • danke. Für eure Hilfe: Ich werde den Code noch aufräumen, doch noch habe ich Probleme mit ajax.

    ich habe jetzt die php Datei erstellt: und möchte über das event, indem ich auf sort klicke auf das json element das hoffentlich dort erstellt wird zugreifen. Eine Verbindung funktioniert . Doch noch verstehe ich nicht wie ich auf das jsonelement oder die unterelemente davon zugreifen kann.

  • Zuerst:

    Wenn du willst, dass der Browser das json versteht darfst du nur das json_encode() als Ausgabe drin haben. Du musst also alle echo entfernen. Wenn du keine Daten hast würde ich einen leeren Array zurückgeben.


    Dann solltest du den Header richtig setzen (vor der Ausgabe des json):


    Code
    header('Content-Type: application/json');


    Dann sollte datajson ein JS-Objekt sein, auf welches du mit Schleifen zugreifen kannst.

  • Danke für die Hilfe. ajax funktiontiert jetzt. Wie kann denn aus der Form :

    <form class="form_button_alignment" >

    Preis bis: <input action="php_extern_search.php" method="get" type="number" min="1" name="preis1">


    </form>

    den Wert in php transportieren. Das müsste doch mit post oder get gehen, oder? Möchte den Wert dann hier statt der 100 nutzen: $sql = "SELECT * FROM mydb WHERE preis > 100";



    var button_search =document.getElementById('button_search')

    button_search.addEventListener('click', function(){

    test.innerHTML = "";

    search_preis_bis = document.querySelector('input[name="preis"]');


    //console.log(search_preis_bis.value)

    $.ajax({

    url: 'php_extern_search.php',

    type: 'post',

    data: {request: 1},

    success: function(data){

    console.log(data.preis);

    data1= JSON.parse(data)

    for(var x=0;x<data1.length;x++){

    console.log(data1[x])

    test.innerHTML += "<tr> <td>" + data1[x].Stadt +"</td><td>"+ data1[x].preis + "</td> " + "</tr>"



    }



    }

    });

    --------------------------

    php_extern_search.php

    <?php


    $servername = "localhost";

    $username = "root";

    $password = "";

    $dbname = "immobilien";


    // Create connection

    $conn = new mysqli($servername, $username, $password, $dbname);

    // Check connection

    if ($conn->connect_error) {

    die("Connection failed: " . $conn->connect_error);

    }

    $result = [];

    $sql = "SELECT * FROM mydb WHERE preis > 100";

    $result = $conn->query($sql);


    if ($result->num_rows > 0) {

    // output data of each row

    while($row = $result->fetch_assoc()) {


    $output[]=$row;

    }

    } else {

    echo "0 results";

    }


    // Json Output

    print(json_encode($output,JSON_UNESCAPED_UNICODE));



    $conn->close();






    ?>

  • Ich hoffe es ist jetzt so eingefügt, wie ihr wolltet. Prinzipiell funktioniert auch alles wie es soll. Nur ist mir nicht klar wie ich die eingegebene Zahl aus der Form im HTML Element in php-extern_search.php zusätzlich laden muss. Ich habe in php_extern_search in $sql versucht eine post-variable zu setzen, die ich aus der Form laden wollte. Hab es auch versucht an die URL anzuhängen. Aber bisher hat leider kein Versuch geholfen, das kleine Problem zu lösen.

    JavaScript
    <script type="text/javascript">
    // pass PHP variable declared above to JavaScript variable
    var output = <?php echo json_encode($output) ?>;
    
    </script>
  • Code
    <input action="php_extern_search.php" method="POST" type="number" min="1" name="preis1">


    Das ist Unsinn. Ein <input>-Tag kennt weder action noch method. Den <form>-Tag brauchst du an sich nicht.


    Du hast grundsätzlich alles da, was du brauchst, du musst Dir einfach angewöhnen sauber zu arbeiten.

    Im Click Eventhandler des Buttons (welcher an sich noch ein type="button" benötigen würde) holst du Dir den Wert aus dem Input. (was du schon hast).


    Den schickst du dann per Ajax (unter data: ) an Dein PHP-Script und kannst das dann per $_POST abgreifen.


    Die Hinweise auf #5 hast du allerdings auch nicht umgesetzt.

  • ok, also wenn ich das richtig verstanden habe. müsste ich dann hier : data: {request: 1} die variable reinschreiben. Ich würde das so machen: data: {request: 1,variable},



    und dann in der php datei würde ich das so aufrufen:

    $preis1 = $_POST["variable"];


    $sql = "SELECT * FROM mydb WHERE preis > ".$preis1; . Ist das ungefär richtig? ,..Welche Bedeutung hat eig. request 1?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!