PHP und AJAX

J

Joschik010405

Grünschnabel
Hallo ich bräuchte mal Hilfe beim Thema AJAX und PHP. Ich versuche einen Chat zu erstellen und habe schon viel nachgeforscht wie das mit AJAX funktioniert, bekomme es jedoch nie hin, egal mit welchem Tutorial ich es versuche :(
Hier ist mein HTML File:

HTML: 
<!doctype html>
<html style="height: 100%;">

<head>
    <title>SelfPhantom</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UFT-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="style/start.css">
    
  
</head>

<body style="height: 100%;">
    <div id="wrapper">
        <div id="content">
            <!-- Chat -->
            <?php
            include('chatnachricht.php');
        
            ?>
            


            <!-- Footer -->
            <div id="footer">
                <footer class="page-footer font-small pt-2 bg-dark text-secondary" style="">
                    <!-- Senden -->
                        <form action="chat3.php" method="post">
                        <div class="input-group mb-3">
                          <input type="text" name="in" class="form-control" placeholder="Nachricht schreiben">
                          <div class="input-group-append">
                        <button name="sub" class="btn btn-success" type="submit" id="myClickBtn" onclick="clickJStoPHP(event)">Senden</button>
                          </div>
                        </div>
                        </form>
    
                    <div class="container-fluid text-center text-md-left">
                        <div class="row">
                            <div class="col-md-6 mt-md-0 mt-3">
                                <div class="footer-copyright text-left py-3">© 2020 Copyright:
                                    <a href="#" class="text-muted"> SelfPhantom.de</a>
                                </div>

                            </div>
                        </div>
                    </div>
                </footer>
            </div>
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="position: fixed; top: 0px; width: 100%;">
                <span class="navbar-brand" style="user-select: none; font-size: 30px; color: red;"><b>SelfPhantom</b></span>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!-- Navlinks -->
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav" style="font-size: 25px;">
                        <li class="nav-item">
                            <a class="nav-link" href="index.html" style="user-select: none;">Home</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="user-select: none;">Chats</a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#" style="font-size: 20px;" style="user-select: none;">Privat</a>
                                <a class="dropdown-item" href="Teamanmeldung.html" style="font-size: 20px;" style="user-select: none;">Gruppen</a>
                                <a class="dropdown-item" href="Teamanmeldung.html" style="font-size: 20px;" style="user-select: none;">Öffentliche Gruppen</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="user-select: none;">Hochladen</a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#" style="font-size: 20px;" style="user-select: none;">Bilder</a>
                                <a class="dropdown-item" href="#" style="font-size: 20px;" style="user-select: none;">Phantoms</a>
                                <a class="dropdown-item" href="#" style="font-size: 20px;" style="user-select: none;">Wetten</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="user-select: none;">Verdienen</a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#" style="font-size: 20px;" style="user-select: none;">Umfragen</a>
                                <a class="dropdown-item" href="#" style="font-size: 20px;" style="user-select: none;">Wetten</a>
                                <a class="dropdown-item" href="#" style="font-size: 20px;" style="user-select: none;">Tests</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="user-select: none;">Shop</a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#" style="font-size: 20px;" style="user-select: none;">Coinshop</a>
                                <a class="dropdown-item" href="#" style="font-size: 20px;" style="user-select: none;">Codes</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="user-select: none;">Profil</a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#" style="font-size: 20px;" style="user-select: none;">Self</a>
                                <a class="dropdown-item" href="#" style="font-size: 20px;" style="user-select: none;">Phantom</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <!-- Scripte -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <!-- Script für Chat -->
        <script type="text/javascript" src="js/jquery-1.3.2.js"> </script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>


    </div>
</body></html>

Und hier mein PHP Code:

PHP: 
<?php 
          $pdo = new PDO('mysql:host=localhost; dbname=chat', 'root', '');
        $sql = "SELECT userid1, userid2, nachricht, nachricht1 FROM chats";
         echo("<div class='container-fluid mw-100' style='border:0px solid black; overflow:auto; margin-top: 100px; position: fixed; max-height: 685px; min-height: 200px;'>");
            

foreach ($pdo->query($sql) as $row) {
    if ($row['userid1']==1 && $row['userid2']==2){
    echo ("<div style='font-family: sans-serif; background-color: dimgray; color: white; font-size: 28px;
max-width: 300px; border-radius: 25px; padding: 10px; margin-bottom: 10px; margin-left: 30px;'>");
    echo ("<div style='font-size: 20px; color: red;'>Joschik</div>");
    echo ($row['nachricht']);
    echo ("</div>");}
    elseif ($row['userid1']==2 && $row['userid2']==1) {
    echo ("<div style='font-family: sans-serif; background-color: gray; color: white; font-size: 28px; max-width: 300px; border-radius: 25px; padding: 10px; margin-bottom: 10px;'>");
    echo ("<div style='font-size: 20px; color: blue;'>Danny</div>");
    echo ($row['nachricht1']);
    echo ("</div>");}
    }
           echo ("</div>");
      
 
        
        
        if(isset($_POST['sub'])){
        $ui1 = 2;
        $ui2 = 1;
        $n = $_POST['in'];
        if ($row['userid1']==1 && $row['userid2']==2){
        $sql = "INSERT INTO chats (userid1, userid2, nachricht1) VALUES ('$ui1', '$ui2', '$n')";
        try {
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    "INSERT INTO chats (userid1, userid2, nachricht) VALUES ('$ui1', '$ui2', '$n')";
    // use exec() because no results are returned
    $pdo->exec($sql);
    }
catch(PDOException $e)
    {
    echo $sql . "<br>" . $e->getMessage();
    }

$pdo = null;
}
elseif ($row['userid2']==1 && $row['userid1']==2){
        $sql = "INSERT INTO chats (userid1, userid2, nachricht1) VALUES ('$ui1', '$ui2', '$n')"; 
        
        try {
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    "INSERT INTO chats (userid1, userid2, nachricht1 VALUES ('$ui1', '$ui2', '$n')";
    // use exec() because no results are returned
    $pdo->exec($sql);
    }
catch(PDOException $e)
    {
    echo $sql . "<br>" . $e->getMessage();
    }

$pdo = null;
}
}
?>
 
Ajax ist ja dafür da das mal ohne Seitenreload die Nachricht senden kann und das man in relmäßigen Abständen die Daten aus der Datenbank holt.

Du hast aber auch nee menge echo gedönst, das muß so auch nicht sein
 
Hier ist mal ein Mini Beispiel wie so ein Ajax Chat laufen kann.

Link zur Lösung



Das Php Script dahinter ist ja nicht wichtig.
Hier speichert er es in deiner Textdatei, was bei dir die Datenbank ist.
 
Zuletzt bearbeitet:
Ihr wisst aber schon, dass es fertige Chats gibt, die dann auch funktionieren und teilweise sogar kostenlos sind?
 
Dein PHP-Skript enthält leider so viele Sicherheitslücken, insbesondere XSS und SQL Injection. Welches Tutorial zu PHP und SQL erwähnt im Jahr 2020 denn nicht SQL Injections?
basti1012 hat gesagt.:
Du hast aber auch nee menge echo gedönst, das muß so auch nicht sein
Zum Vergrößern anklicken....
Da stimme ich Basti zu, das ist leider typischer Spaghetticode.
 
Indem man sich ein gescheites Buch/Tutorial über solche Themen zu Gemüte führt :) Auch habe ich dir bereits zwei Stichwörter (XSS, SQL Injection) genannt, die du googeln könntest.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück