✔ Einfaches Form an ein Div senden per Ajax?

Felix1980

Felix1980

Grünschnabel
Hallo liebe Wissenden :-)

JS & Ajax sind leider nicht so meins. Aber ich beschreibe mal das, was ich machen möchte:

Ich habe ein PHP Form, wo eine Variable gesetzt wird. Diese Variable brauche ich allerdings auf weiteren Seiten dann immer wieder. (Also es ist eigentlich nur ein Code, der mir dann eine entsprechende Bilddatei aus der Datenbank holt).

So. Nun möchte ich das ganze aber so machen dass z.B. vor dem Form ein Div ist, wo dann der Code direkt angezeigt wird, bzw. direkt das IMG.

Wenn ich ins Form z.B. ABC123 eingebe, senden drücke, dann soll das Form ausgeblendet sein und dann nur noch das Bild in der Form <img src="www.xyz.de/bilder/<?php echo $PostVar; ?>" zu sehen sein.

Wie realisiere ich sowas? Ich habe einen Formmailer gefunden, der den Eingegeben Inhalt in das DIV packt, aber da kommt nur ganz viel Code mit in das Div und ich denke mir, jemand der JS und Ajax kann für den dürfte das recht easy sein.

Kann mir jemand helfen?

VLG Felix
 
Was auch noch eine Möglichkeit wäre dass man in das Form den Code eingibt und dann wird ein Cookie gesetzt und selbiger wird dann in dem Div über dem Form ausgegeben (halt das Bild).

Also falls da jemand eine Idee hat wäre ich echt happy. Wie gesagt nur der JS/AJAX Teil den kenne ich nicht :-/
 
Gerade wenig Zeit, poste daher mal ein wenig Code nur.
Bei Fragen gerne nochmal melden, werde dann später antworten, aber vielleicht hilft dies ja schon.

HTML: 
<!doctype html>
<html lang="de">
     <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <title>test1</title>
      </head>
      <body>
          <div id="image_anzeige"><img id="image_anzeige_src" src=""></div>
          <div id="inhalt">
                  <label>PostVar: </label><br>
                  <input id="PostVar" type="text" name="PostVar"><br>
                  <input id="senden" type="submit" value="Submit">
          </div>
          <script type="text/javascript">
              $(document).ready(function() {
                $("#image_anzeige").hide();
            });

              $("#senden").click(function(){
                  PostVar_jquery = $("#PostVar").val();
                  $.ajax({
                    url: 'ajax_get_image.php',
                    dataType: 'text',
                    type: 'post',
                    data: {
                        PostVar: PostVar_jquery
                    },
                    success: function( img ){
                        $("#image_anzeige").show();
                        $("#inhalt").hide();
                        $('#image_anzeige_src').empty().attr('src', img );
                        console.log( img );
                    },
                    error: function(error, txtStatus) {
                         console.log(txtStatus);
                        console.log('error');
                    }
                });
            });
          </script>
    </body>
</html>
und die ajax_get_image.php gibt nur den Pfad + Bildname zurück, da kannst Du dann ja deine DB Abfrage reinbauen, da du damit denke ich keine Probleme hast.

PHP: 
<?php

$id = $_POST['PostVar'];

echo "images/". $id;
 
Guten Morgen Heiko,

vielen vielen lieben Dank für Deine Hilfe!!! Also das klappt jetzt schon sehr gut. :-)

Allerdings habe ich dennoch eine kleine Frage:

Code: 
<?php
$id = $_POST['PostVar'];
//Session registrieren
$_SESSION['username'] = $id;

//<a href=\"logout.php\">Session beenden</a><br><br>";
       
function code_finden($pruefcode)
{
    require_once ('db_con.php');
    $db_link = mysqli_connect (
                     MYSQL_HOST,
                     MYSQL_BENUTZER,
                     MYSQL_KENNWORT,
                     MYSQL_DATENBANK
                    );
    mysqli_set_charset($db_link, 'utf8');   
   
    if ( $db_link ) { } else { die('keine Verbindung möglich!'); }   

    $sql = "SELECT * FROM code_liste WHERE code = '$pruefcode'";
    $db_erg = mysqli_query( $db_link, $sql );
    if ( ! $db_erg )
    {
          die('Ungültige Abfrage: ' . mysqli_error());
    }
    
    $ausgabe = array(); $i = 0;
    while ($zeile = mysqli_fetch_array( $db_erg))
    {
        $ausgabe[$i] = $zeile;
        $i = $i+1;
    }
    return $ausgabe;
    mysqli_free_result( $db_erg );   
}

// Wenn der Code vorher übermittelt worden ist, wird er hier gesucht   
$zellen = code_finden($id);   

$bild1 = $zellen[0]['pfad']."thumbs/".$zellen[0]['dateiname'];   
//$bild2 = $zellen[1]['pfad']."thumbs/".$zellen[1]['dateiname'];
   
echo $bild1;

echo "Hallo";
?>

Wie müsste ich das JS anpassen, damit ich z.B. wie oben in dem Code noch das Bild2 oder das Beispiel echo "Hallo" ausgeben wollte?
Du sagtest die Funktion gibt nur den Pfad zurück, ist das bei AJAX immer so oder kann man einfach alles, das in der ajax_get_image ausgegeben wird in das DIV einfließen lassen?

Ich versuche das JS zu verstehen damit ich dahingehend auch mal irgendwann etwas fitter werde.

VLG und noch mal super vielen Dank!!!

Felix
 
Hallo, ich habe es mal so erweitert, das mehrer Daten übergeben werden können.
Ich mache dies mit JSON.

Ich hoffe aus dem Beispiel ist zu erkennen wie dies funktioniert.
Ich übergebe 2 weitere Daten.

HTML: 
<!doctype html>
<html lang="de">
     <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <title>test1</title>
      </head>
      <body>
          <div id="image_anzeige"><img id="image_anzeige_src" src=""></div>
          <div id="hier_was_anderes"></div>
          <div id="hier_was_anderes2"></div>
          <div id="inhalt">
                  <label>PostVar: </label><br>
                  <input id="PostVar" type="text" name="PostVar"><br>
                  <input id="senden" type="submit" value="Submit">
          </div>
          <script type="text/javascript">
              $(document).ready(function() {
                $("#image_anzeige").hide();
            });

              $("#senden").click(function(){
                  PostVar_jquery = $("#PostVar").val();
                  $.ajax({
                      type: 'post',
                      url: 'ajax_get_image.php',
                      data: {
                        PostVar: PostVar_jquery
                    },                   
                    dataType: 'json',
 
                    success: function( daten ){
                        $("#image_anzeige").show();
                        $("#inhalt").hide();
                        $('#image_anzeige_src').empty().attr('src', daten.bild );
                        $('#hier_was_anderes').empty().html( daten.anderes );
                        $('#hier_was_anderes2').empty().html( daten.anderes2 );
                        //console.log( daten );
                    },
                    error: function(error, txtStatus) {
                         console.log(txtStatus);
                        console.log('error');
                    }
                });
            });
          </script>
    </body>
</html>

und die einsprechende PHP Datei die die Daten holt.
PHP: 
<?php

$id = $_POST['PostVar'];

$bild = "images/". $id;

$nochwas = "Hier noch was";

$daten = array(
    "bild" => $bild,
    "anderes" => "Irgendwas anderes ausgeben",
    "anderes2" => $nochwas
);

echo json_encode($daten);
 
Hallo Heiko,

vielen lieben Dank!!! Nun klappt es so wie ich es mir vorgestellt habe.
Jetzt habe ich gerade das versucht in mein WP mal einzubinden, kann es sein, dass ich hier: url: 'ajax_get_image.php', nicht sowas wie url: 'http://localhost/xyz/ajax_get_image.php', eintragen kann?
Oder muss man dann einen anderen Syntax verwenden?

VLG

Felix
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück