Asynchrone Datenübertragung zwischen Server und Browser mit AJAX JQuery und Json?

Ich habe folgende Aufgabe bekommen:

Finden Sieh heraus, wie Sie ein Formular via AJAX (jQuery) (asynchronen Datenübertragung zwischen einem Browser und dem Server) absenden, und die Antwort auswerten.

Zusätzlich: PHP Soll alle Daten im modernen Json Format liefern.

Ich würde mich freuen wenn mich jemand dabei Unterstützen kann ich habe noch nie mit JQUERY oder Json gearbeitet. Vielleicht kann es mir wer erklären und zusammen bearbeiten. Würde mich freuen

1 Antwort

JuliMax158

12.08.2022, 09:47

Okay ich habe mittlerweile eine Lösung ich weiß aber nicht ob sie optimal ist. So sieht sie bisher aus:

<?php
header('Content-type: application/json');
$text="";
if(isset($_POST["text"])){
    $text=$_POST["text"];
}else{
    $text="hier kam nix an";}
$data = ["antwort" => $text ];
echo json_encode($data);
    ?>

Das ist der PHP Teil

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

    function loadDoc() {

    
        let text = document.getElementById("ausgabe").value;
        $.ajax({
            url: "cookies.php",
            type: "POST",
            dataType: "json",
            data: {"text": text},
            success: function (data) {
                console.log(data.antwort);
            },
            error: function (error) {
                console.log("Error:");
                console.log(error);
            }
        });
    }
</script>

Und das ist der Script Teil. Würde mich freuen wenn jemand vielleicht Verbesserungsvorschläge hätte.

LeBonyt

12.08.2022, 10:57

Funktioniert denn das alles so?

Ähnliche Beiträge

Warum ist $_POST hier leer?

Hi, arbeite gerade an nem Kontaktformular, welches mit JQuery und Ajax gesendet werden soll. Hier der Code:

let form = $(this);
let actionUrl = "assets/php/contact.php";

$.ajax({
    type: "POST",
    url: actionUrl,
    contentType: "application/json",
    data: form.serialize(),
    success: function (backendError) {
        console.log(backendError);
        errorHandler(backendError);
    },
    error: function () {
        console.log("failure");
        alert("Internal Error occured. Please try again later");
    }
});

hier der PHP Code zum senden:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    try {
        $errors = array();
        $name = "";
        $email = "";
        $human = "";
        $message = "";

        if (empty($_POST["name"])) {
            $errors[] = "name";
        } else {
            $name = $_POST["name"];
        }

        if (empty($_POST["email"])) {
            $errors[] = "email";
        } else {
            $email = $_POST["email"];
        }

        if (empty($_POST["human"])) {
            $errors[] = "human";
        }

        if (empty($_POST["message"])) {
            $errors[] = "message";
        } else {
            $message = $_POST["message"];
        }

        if (count($errors) === 0) {
            $to = "my@email.de";
            $subject = "Kontaktformular - " . $name;
            $message = "";
            $additional_headers = array(
                "From" => $email,
                "Reply-To" => $email,
                "X-Mailer" => phpversion()
            );

            mail($to, $subject, $message, $additional_headers);
            $response["error"] = false;
            echo json_encode($response);
            exit;
        } else {
            $response["error"] = $errors;
            echo json_encode($response);
            exit;
        }
    } catch (Exception $exception) {
        // in Log File Time + Error + IP
        exit;
    }
}

mein Problem: das POST Array is leer. Habs mir mal ganz oben ausgeben lassen, und stand nix drin, obwohl jquery die inputfelder per POST an das PHP File sendet. Ich denke, dass ich irgendwas bei der $ajax methode falsch gemacht habe, und es deshalb net funktioniert. bin am verzweifeln :) danke für jede Hilfe!

...zum Beitrag

MySQL databse auf update prüfen?

Gibt es eine if abfrage in PHP mit der ich eine veränderung in einem SQL Table feststellen kann? Oder wird dafür jQuery ajax benötigt?

Danke für Antworten :)

...zum Beitrag

Ajax Datenaustausch?

Bin neu in der Web Entwicklung und gerade bei Ajax und jquery angelangt, da hab ich mir jetzt aber folgende Frage gestellt: Ajax kommuniziert ja mit dem Server via Datenaustausch... Sagen wir mal, man will Berechnungen ausführen. Da könnte man ja einerseits ein Skript beim client laufen lassen(via async) oder das halt über den server berechnen lassen und dem client dann wieder zukommen lassen... Wann macht jetzt aber was Sinn?Gibt es da nh Faust Regel ab welchem Rechenaufwand man was nimmt ?

...zum Beitrag

Warum gibt mein PHP Programm kein json aus?

Hallo Community

Ich habe folgendes PHP Skript:

<?php
# json echo
$json = '
{
   "message": "Some message in json!",
   "category": "message
}';
$print_this = json_decode($json);
echo $print_this;
?>

Wenn ich dieses über ein Webserver in einem Browser aufmache, ist dieses leer. Weiss Jemand, was da das Problem ist? Der Server kann andere PHP Programme ohne Probleme ausführen.

Danke für eure Hilfe.

...zum Beitrag

Ich habe ein Login gebaut. Jenen sollen wir nun ausschließlich mit AJAX verbessern. (Wir dürfen dabei nicht sowas wie JQUERY verwenden. Das wissen fehlt uns aber dafür an meisten. Vielleicht kann jemand mir dabei helfen mein Login umzubauen und zu verstehen was ich mache.

Mein Login-Quelltext:

<?php
$pdo = new PDO('mysql:host=localhost;dbname=phptest', 'root', '');

if(isset($_GET['login'])) {
  $email = $_POST['Email'];
  $passwort = $_POST['Passwort'];

  $statement = $pdo->prepare("SELECT * FROM login WHERE Email = :Email");
  $result = $statement->execute(array('Email' => $email));
  $user = $statement->fetch();

  //Überprüfung des Passworts
  if ($user !== false && password_verify($passwort, $user['Passwort'])) {
    $_SESSION['userid'] = $user['ID'];
    die('Login erfolgreich. Weiter zu <a href="index.php?site=Startseite">internen Bereich</a>');
  } else {
    $errorMessage = "E-Mail oder Passwort war ungültig<br>";
  }

}
?>
<!DOCTYPE html>
<html>
<head>
  <title>Login</title>
</head>
<body>

<?php
if(isset($errorMessage)) {
  echo $errorMessage;
}
?>

<form action="Loginseite.php?login=1" method="post">
  E-Mail:<br>
  <input type="email" size="40" maxlength="250" name="Email" required><br><br>

  Dein Passwort:<br>
  <input type="password" size="40" maxlength="250" name="Passwort" required><br>

  <input type="submit" value="Login">
</form>
</body>
</html>

...zum Beitrag

Ajax holt Daten, JQUERY erkennt ID nicht?

Hallo

Ich hoffe, dass Ihr mir auf die Sprünge helfen könnt.

Mittels Button wird per JQUERY Ajax aufgerufen. Von der Datenbank werden Bilder ausgegeben.

Nun habe ich vorher schon einige Funktion gebastelt, die mir erlauben das Bild zu bearbeiten, z.B. mittels keyUP die Positionen vom Bild zu verändern, Größe und Co.

Da es mehrere Bilder sind, wird in der PHP Datei eine For-schleife erstellt, wo die Inputs und Buttons mit classen (und Id->testzweck) versehen werden (echo-ausgabe).

Nun lassen sich weder die Buttons noch mit Inputs steuern, weder mit this bzw Klassen noch mit der Id.

Hat vielleicht jemand eine Idee woran es liegen könnte?

      $('#load_image').click( function (event) {
        event.preventDefault();
        $.ajax({
          type: 'POST',
          url: 'ajax/home.php',
          data: $(this).serialize(),
          success: function (title_image) {
            $('#title_image').html(title_image);
          }

        });
      });



<button id="load_image" type="submit" name="load_image" class="btn btn-primary start"> <span><i class="glyphicon glyphicon-picture"></i>Bilder Laden</span> </button>
        <div id="title_image" class="margin">
          <!-- DIVS vom PHP AJAX -->
        </div>

Ajax PHP datei

if (!$title->execute()) {
  echo "Fehler";
} else {
  $name = array();
  while ($data = $title->fetch()) {
    $name[] = $data['name'];
  }
$count = count($name);
  for ($i=0; $i < $count; $i++) {
    echo $name[$i];

/* DIVS */
    echo '    <input type="number" id="image_horizontal_edit1" value="" placeholder="Horizontal">';
    echo '    <input type="number" id="image_vertical_edit1" value="" placeholder="Vertical"><br><br>';
    echo '    <input type="number" id="image_zoom_edit1" value="" placeholder="Zoom"><br><br>';

...zum Beitrag

Unterschiede zwischen PHP und JavaScript?

Hallo,

Ich habe gelesen das man halt für die Funktionen der Website z.B PHP oder JavaScript brauch. Ich würde gerne euch fragen was benutzt ihr und was heißt denn eigentlich Server-Side und Client-Side? Würde php ohne einen Server nicht gehen oder wie ist das gemeint?

Danke

Max

...zum Beitrag

[jQuery AJAX] echo mit HTML Content von PHP Datei ausgeben?

Okay, die Frage ist evtl ein bisschen kompliziert. Deshalb beschreibe ich das anhand eines Beispiels. Zuerst meine Dateien:

PHP (submit.php)

<?php
 $mail = $_GET['mail']; if(filter_var($mail, FILTER_VALIDATE_EMAIL)) { echo "<div role=\"alert\">Ungültige E-Mail</div>"; } else { echo "<div role=\"alert\">Gültige E-Mail</div>"; }

?>

HTML (index.html)

<form id="myForm">
  <input type="email" name="mail" id="mail" placeholder="E-Mail Adresse"/>
  <input type="submit" name="check" id="check" value="Senden"/>
</form>
<script src="http://code.jquery.com/jquery-1.9.1.js"/> <script> $(function () { $('form').on('submit', function (e) { e.preventDefault(); $.ajax({ type: 'post', url: 'submit.php', data: $('form').serialize(),   success: function() {    //echo "Gültige E-Mail    } error: function() { //echo "Ungültige E-Mail" } }); }); }); </script>

Beschreibung:

Sobald das Formular abgesendet wurde, wird die E-Mail an die submit.php gesendet. In dieser wird überprüft, ob die E-Mail gültig ist und gibt dann das Ergebnis in Form von HTML-Code zurück.

Die Lösung mit alert will ich nicht. Es soll unterhalb der Form das Ergebnis stehen.

Wenn ich mit PHP

echo "<div role=\"alert\">Gültige E-Mail</div>";

ausgebe, dann steht das auch direkt in HTML dort (also nicht als PlainText).

Wie ist es also möglich, das Ergebnis der submit.php zu bekommen und in der index.html auszugeben?

Vielen Dank im Voraus!

...zum Beitrag

Wie sende ich Variablen von JavaScript nach Flask via jQuery?

Hallo,

ich bin in JavaScript/jQuery und auch Python/Flask noch ein ziemlicher Anfänger. Ich versuche gerade, einfach nur ein JSON-Objekt aus JavaScript in einem HTML-Template mit Flask anzuzeigen.

Hier mein Code:

Flask:

from flask import Flask,request, render_template

app = Flask(__name__)

@app.route("/")
def rofl():
  return render_template("test.html")

@app.route("/test", methods=['POST'])
def test():
  Namensliste = request.get_json(True)
  print(Namensliste)
  return render_template("rofl.html", Namensliste=Namensliste)

if __name__ == '__main__':
  app.run(port=5200)

test.html:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="#" method="post">
    <button type="button" onclick="JSONTest()"> Send UserInfo</button>
  </form>
</body>

rofl.html:

<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<body>
  NamensListe: {{Namensliste}}
</body>

JavaScript-Datei:

var myJason = {
  "name1" : "Jens",
  "name2" : "Josef",
  "name3" : "Johannes"
}

function JSONTest() {
  var MyJason= JSON.stringify(myJason);
  console.log(MyJason)
  $.ajax({
    type: 'POST',
    url: '/test',
    data: MyJason,
    success: function(data) {
      console.log(data, "Rückmeldung1");
  }});
}

Wie mein Code eigentlich funktionieren soll ist: Ich rufe die Route "/" auf, drücke auf den Button: "JSONTest()" und meine Funktion sendet via jQuery mein JSON-Objekt an "/test". Dort wird das Objekt in Namensliste gespeichert und rofl.html mit der Namensliste darin aufgerufen.

Ich weiß, dass hier wahrscheinlich viele Grundlagenfehler drin sind, aber ich habe wirklich ewig lang gegooglet und finde einfach nicht, wie man es richtig macht.

Danke schon einmal für jede Idee.

...zum Beitrag

PHP MySql Login / Passwort überprüfung?

Kann mir da jemand sagen wo der Fehler liegt ? Ich bin da am verzweifeln.

Login, Registrierung, Fehlermeldung, SQL Struktur habe ich alles in die Frage gepackt damit ihr einen besseren überblick habt.

login.php:

<?php
   $server = 'localhost';
   $user = 'root';
   $psw = null;
   $dbName = 'TestApp';
try {
   $conn = new PDO('mysql:host='.$server.';dbname='.$dbName.';charset=utf8', $user, $psw);
   $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
   $conn->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

    $username = htmlspecialchars(stripslashes(trim($_POST['username'])));
    $password = htmlspecialchars(stripslashes(trim($_POST['password'])));

    $statement = $pdo->prepare("SELECT * FROM user WHERE username = :username");
    $result = $statement->execute(array('username' => $username
                                    ));
    $user = $statement->fetch();
    //Überprüfung des Passworts
    if ($user !== false && password_verify($username, $password['passwort'])) {
        $_SESSION['userid'] = $user['id'];
        die('Login erfolgreich. Weiter zu <a href="geheim.php">internen Bereich</a>');
    } else {
        $errorMessage = "Nutzername oder Passwort war ungültig<br>";
    }

}catch (PDOException $e) {
    print "Error!: " . $e->getMessage() ;
    exit;
  }

Konsole :

<br />
<b>Warning</b>: Undefined variable $pdo in <b>C:\xampp\htdocs\Test\assets\php\login.php</b> on line <b>14</b><br />
<br />
<b>Fatal error</b>: Uncaught Error: Call to a member function prepare() on null in C:\xampp\htdocs\Test\assets\php\login.php:14
Stack trace:
#0 {main}
 thrown in <b>C:\xampp\htdocs\Test\assets\php\login.php</b> on line <b>14</b><br />

register.php

<?php
   $server = 'localhost';
   $user = 'root';
   $psw = null;
   $dbName = 'TestApp';
try {
   $conn = new PDO('mysql:host='.$server.';dbname='.$dbName.';charset=utf8', $user, $psw);
   $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
   $conn->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

// POST wird mit AJAX gesendet
   $username = htmlspecialchars(stripslashes((trim($_POST["username"])))) ;
   $password =  password_hash(htmlspecialchars(stripslashes((trim($_POST["password"])))) ,PASSWORD_DEFAULT) ;
   $cash =     100;

// Schreibt in die Datenbank

   $sql = "INSERT INTO user (username,password,cash) VALUES (:username,:password,:cash) ";
   $sqlvars = array("username"  => $username,
   "password" => $password,
   "cash" => $cash);
   $Abfrage = $conn->prepare($sql);
   $Abfrage->execute($sqlvars);


}catch (PDOException $e) {
  print "Error!: " . $e->getMessage() . "<br/>";
  exit;
}

SQL STRUKTUR :

Datenbankname : Test

Tabelle : user , 5 Spalten/Rows

id | int , (auto increment)
username | varchar , (unique)
password | varchar, (gehasht mit salt sha512)
cash | varchar
time | datetime, (mit current time stamp)

und ich mache alles mit AJAX.

-PDO statt mysqli

...zum Beitrag

JavaScript AJAX sicher?

Hey Community, Habe momentan ein User Control Panel gemacht via PHP. Jetzt wollte ich mich ein bisschen weiterbilden und kam auf die Idee eine Single Page zu machen. Die Frage ist ob AJAX genauso (un)sicher ist wie PHP. Soweit ich das verstanden habe, via AJAX, gibt der User beim Formular ja loginname und pw an, dann übergebe ich die Daten an das JavaScript und er gibt dann via POST die Daten weiter an meine PHP Datei und via Echo kann ich auf das js antworten und dann entscheiden was damit gemacht wird.

Meine Frage: Wie sicher ist das? & kann der Nutzer das JavaScript einsehen, sowie den Quellcode?

...zum Beitrag

JavaScript Hintergrundprozess laufen lassen?

Ich möchte eine JavaScript Aufgabe asynchron im Hintergrund laufen lassen, die vom Client gesteuert wird.

Normalerweise wird eine asynchrone Aufgabe ausgeführt und gibt eine Antwort zurück.

Ich allerdings möchte den Hintergrundprozess laufen lassen und immer wieder Antworten bekommen.

In meinem Beispiel ist es Puppeteer, eine Alternative für Selenium.

Auf der Website läuft der Puppeteer Browser auf dem Server. Clientseitig soll dieser Hintergrundprozess gesteurt werden, zum Beispiel klickt der Client einen Button, der im Puppeteer Browser auf dem server etwas auslöst.

Wie kann ich so einen Hintergrundprozess, Puppeteer, laufen lassen?

Ich bin es gewohnt, nur sowas wie API-Endpunkte zu benutzen, also eine Anfrage wird gesendet, die Aufgabe wird ausgeführt und eine Antwort kommt zurück.

...zum Beitrag

Javascript (JQuery) in PHP einbinden?

Schönen guten Abend liebe Community,

also ich kann mich seit Ostern dieses Jahres als glücklicher Programmieranfänger bezeichnen. So habe ich mit HTML und CSS begonnen und mich dann über Javascript(JQuery) und Python auch mal an PHP getraut, da ich meine Web-Developement 'Skills' auch mal im Back-End erweitern wollte. Jetzt stoße ich aber ziemlich früh an ein Problem, bei dem ich einfach nicht dahinter Blicke. Meine Intention ist es dabei Javascript (vorallen Dingen JQuery) in PHP mit einzubeziehen. Dafür habe ich mithilfe von XAMPP einen lokalen Server gehostet, auf dem auch alles wunderbar funktioniert. Selbst CSS habe ich nach etwas 'Mehrrerei' zum Laufen gebracht. Jetzt scheitert es aber leider an JQuery. Ich habe das bislang wie im Bild erkenntlich so versucht, meine JQuery Datei mit in den Ordner zu ziehen. Diese dann im Head Bereich zu verlinken und ein Javascript-Script zu erstellen. Wenn ich dort nun jedoch JQuery Code hineinschreibe, wird dieser im Browser nicht ausgeführt.

Nun meine Frage....warum funktioniert das Ganze nicht, bzw. was habe ich falsch gemacht?

Danke schon einmal für alle Antworten!

...zum Beitrag

Php und Formular speichern?

Im folgenden PHP Code wird beim absenden des Formular eine Datei erstellt mit denn Daten aus den Formular. Der Name der Datei die erstellt wird , ist in meinem Beispiel "anfrage.txt". Meine Frage ist jetzt wie bekomme ich das hin das der Name der Datei der Name aus denn Formular Daten ist, und anbesten mir dann an meine Gmail Email adresse gesendet wird.

<?php
{
    // und nun die Daten in eine Datei schreiben
    // Datei wird zum Schreiben geöffnet
    $handle = fopen ( "anfragen.txt", "w" );


    // schreiben des Inhaltes von email
    fwrite ( $handle, $_GET['email'] );


    // Trennzeichen einfügen, damit Auswertung möglich wird
    fwrite ( $handle, "|" );


    // schreiben des Inhalts von name
    fwrite ( $handle, $_GET['name'] );


    // Datei schließen
    fclose ( $handle );


    echo "Danke - Ihre Daten wurden speichert";


    // Datei wird nicht weiter ausgeführt
    exit;
}
?>

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen