PHP und AJAX


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;
}
}
?>
 

basti1012

Erfahrenes Mitglied
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
 

ComFreek

Mod | @comfreek
Moderator
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?
Du hast aber auch nee menge echo gedönst, das muß so auch nicht sein
Da stimme ich Basti zu, das ist leider typischer Spaghetticode.
 

ComFreek

Mod | @comfreek
Moderator
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.
 

Neue Beiträge