Beim klicken auf ein Bild eine PHP-Funktion ausführen?

Guten Tag!

Ich versuche jetzt schon seit längerem, bei einem Klick auf ein Bild eine PHP Funktion aufzurufen - OHNE Reload - Also, Beispiel:

<a onclick='führe php funktion aus'><img src='iwas.png'></a>

Ich habe nach ergiebigem Googlen öfters etwas von "AJAX" gehört - Jedoch nie ein Tutorial gefunden.. Könnte mir jemand vielleicht aus der Patche helfen?

MfG

4 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Hosenmist95

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

17.02.2013, 14:46

AJAX ist nichts anderes wie mittels javascript ein php-script aufzurufen und dessen ausgabe in das aktuelle dokument zu laden. Sprich ich mach ein DIV und in dieses Div lade ich dann die Ausgabe eines PHP-Dokuments. Das ist allerdings nur mit Javascript machbar. Hat der Nutzer javascript deaktiviert, gibts ein problem und eine alternativ-lösung (reload) ist nötig.

Lad dir jQuery runter und bau es in dein skript ein

<script type="text/javascript" src="jQuery.js"></script>

dann kannst du mit der einfachsten aller einfachen variante (.load() ) einen AJAX-Request vollführen :-D

Beispie.:

index.php

<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$('#clickme').click(function(){
$('#result').load("pfadzurphpdatei.php");
});
</script>
</head>
<body>
<span id="clickme">Klick mich um PHP ausführen zu lassen</span><br>
<div id="result"></div><br>
<p>Klick ruhig öfter auf den text dort oben :-)</p>
</body>
</html>

pfadzurphpdatei.php

<?php
echo "Aktuelle Zeit: ".time();
?>

Bei .load(); kann man dann auch mittels GET-Paramenter variablen übergeben ;-)

Die Alternative wäre dann .ajax(); das ist allerdings sehr kompliziert ;-))

FragantHundert

Fragesteller

17.02.2013, 18:56

Vielen Dank :)!

Das einzige Problem ist hierbei, dass ich keinen Zugriff auf den Head habe - Es ist nämlich ein Plugin für MyBB :/

MfG

Hosenmist95

18.02.2013, 18:02

@FragantHundert

Dann wird es zwar schwierig, aber nicht unmöglich - kenn mich mit mybb nicht aus, was aber 99,9% funktoinieren muss:

Registrier dich bei einem freehoster (egal bei wem, hauptsache er kann PHP und mach das PHP-Skript da drauf - dann rufst du halt statt

.load('pfadzurdatei.php');

einfach

.load('http://www.subdomain.freehoster.com/pfadzurdatei.php');

Das müsste auch funktionieren ;-)

TimMagFussball

19.04.2020, 11:24

Falsch!

TimMagFussball

19.04.2020, 11:24

Woher ich das weiß:Berufserfahrung

cat64k

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

16.02.2013, 20:35

ohne reload hast du keine Chance. da javascript nur clientseitig läuft und php erst nachdem senden den inhalt ändern kann.

AJAX bietet schon gute Schnittstellen, aber ein reload muss trotzdem erfolgen

FragantHundert

Fragesteller

16.02.2013, 20:40

Verdammt, das ist schade :(

Wäre halt für mein Projekt von Vorteil gewesen ^^ Muss nämlich etwas in die Datenbank schreiben, und dann das Bild ändern :/

FragantHundert

Fragesteller

16.02.2013, 20:46

@FragantHundert

Gibt es denn eine Möglichkeit bei Klick auf dem Bild überhaupt irgendwie eine PHP-Funktion aufzurufen? Selbst wenn es mit Reload ist?

verreisterNutzer

16.02.2013, 21:22

Zu dem Reload sollte man vielleicht etwas detaillierter werden:

Um PHP auszuführen muss zwar eine Seite (neu) geladen werden, aber das muss nicht die sein die im Browserfenster angezeigt wird. Dafür gibt es AJAX - das kann im Hintergrund, unabhängig von der Seite die du anschaust, weitere Skripte aufrufen. "Sichtbar" lädt sich so im Browser keine Seite neu.

Hier ist ein ziemlich simples Tutorial das dir die Funktionsweise näher erläutert:

http://www.w3schools.com/php/php_ajax_php.asp

(und das war bei Google auf der ersten Suchergebnisseite...)

WhiteGandalf

Nutzer, der sehr aktiv auf gutefrage ist

im Thema programmieren

17.02.2013, 04:28

Hmmm, ein paar Beispiele (für Unterricht ausgelegt) könnte ich anbieten...

http://harryboeck.dyndns.org/Experimente/js/XMLHttpRequest/XMLHttpRequest.php

Hallo liebe Community,

ich möchte in JavaScript einen Text anhand von Eingaben eines Users zusammenbauen, was auch reibungslos funktioniert.

Da ich noch nie zuvor wirklich mit PHP gearbeitet habe, da ich bisher keinen Server benötigt habe, weiß ich leider nicht genau, wie man mit AJAX einen String bzw. den Text an PHP übergibt, um es dann als E-Mail mit der mail-Funktion von PHP weiterzuleiten.

Bevor ich hier Antworten erhalte, ob ich nicht wüsste, was PHP ist: Doch dies weiß ich und möchte wirklich nur wissen, wie genau ich den AJAX-Request erstellen muss, um diese Variable an PHP zu versenden. Wenn dies geschehen ist, muss allerdings auch PHP darauf reagieren. Wie stelle ich das an?

...zur Frage

Javascript mit onclick-Attribut ändern?

Hallo,

wie kann ich mit JavaScript ein Attribut ändern, wenn ich auf das entsprechende Objekt klicke?

Bis jetzt habe ich folgenden Code:

<img src="bild.png" onclick="elem.setAttribute("src","anderesbild.png");">

...zur Frage

Mit Ajax und PHP Datensatz in MySQL-Datenbank eintragen?

Hallo liebe Community!

Ich versuche gerade eine "Speicher-Funktion" zu schreiben, die mithilfe von Ajax direkt Daten an den Server schickt und dann mittels PHP in die Datenbank speichert. Das ganze soll jedoch ohne Verlassen der Seite geschehen, sprich ein Klick auf Speichern verursacht kein Neuladen der Seite. Habe jedoch ein Problem, denn der Inhalt der gespeichert werden soll befindet sich nicht direkt in einem Formular sondern ist bereits aus der Datenbank in ein

mit (attr) contenteditable="true" geladen worden. Seht ihr hier eine Lösungsmöglichkeit, die ich evt. nicht bedacht habe? Danke schon mal.

...zur Frage

Button nur anzeigen wenn in Datenbank vorhanden?

Ich habe einen button in php und will das dieser nur angezeigt wird wenn in der Datenbank etwas vorhanden ist. In dem Fall: Antike Münze. Das ist mein Code:

<?php

include ("../html/header.html");

include "connect_database.php";

$sql = "SELECT wert FROM inventar WHERE name='Antike Münze'";

$result = mysqli_query($conn, $sql);

<img src="../img/huette-matrei(3).jpg" width="1500" height="900">

<h1>Was wollen Sie nun sagen?</h1>

<button onclick="window.location.href = 'Schlüssel_nicht_bekommen.php';">Leider habe ich nichts antikes, altes.</button>

<?php

if (mysqli_num_rows($result) > 0) {

<button onclick="window.location.href = 'Kaufen.php';">Ich habe eine antike Münze für dich.</button>

<?php

}

<?php

include "../html/footer.html";

Mein Problem: Der Button wird angezeigt obwohl in der Datenbank nichts drin ist.

Warum funktioniert das so nicht?

...zur Frage

[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!

...zur Frage

Wie kann ich eine PHP Funktion wiederholt ausführen ohne Reload?

Ich möchte, dass sich ein String, der via Echo ausgegeben wird, sich bei Klick auf Button um einen erhöht. Aber dabei soll nicht die Seite immer wieder neuladen. Wie kann man es machen?

Gruß

...zur Frage

Bild auf Website lädt nicht wegen CSP?

Hallo,

ich habe eine CSP bei NGINX eingerichtet und angepasst, es funktioniert alles, bis auf eine Sache, wenn ich data:image/... Bilder aufrufen möchte werden die von meiner CSP geblockt.

Refused to load the image 'data:image/svg+xml;base64,...' because it violates the following Content Security Policy directive: "img-src 'self' data".

Wie muss ich meine img-src CSP anpassen? Hier ist was ich habe:

img-src 'self' data;

Danke für alle Antworten im Voraus

...zur Frage

AJAX: Wie kann ich den Inhalt der textarea verändern?

Hallo,

ich habe eine textarea, in der man Text eingibt. Per AJAX wird dieses Feld dann verändert:

function function() {
  jQuery.ajax({
    url: "change.php",
    data: {
      "text": $("#text").val(),
    },
    type: "POST",
    success:function(data) {
      $("#text").val(data);
    },
    error:function() {
    }
  });
}

Doch das Problem ist, dass die komplette echo-Ausgabe vom PHP-Skript dann da drin steht.

Das Skript sieht etwa so aus:

<?php
  echo "<p>Dein neues input-Feld:</p>";
  echo '<textarea id="output">'.$NeueAusgabe.'</textare>';
  echo "<p>richtig ? </p>";
?>

Ich will aber nur den Inhalt der Variable dann darin austauschen und das hier noch zur textarea hinzufügen:

onClick="this.select();"

Wie geht das?

...zur Frage

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>';

...zur Frage

Bild verkleinern ohne die div kleiner zu machen?

Ich will ein Bild verkleinern ohne ein Div kleiner zu machen, wie geht das?:

    <div class="container-book1">
        <img class="book-image" src="48gesetze1.jpg">  
    </div>

.book-image {
    box-shadow: 10px 10px 10px rgb(14, 14, 14);
}

...zur Frage

HTML mehrere onclick?

<script>function play() {var audio = document.getElementById("sd_00143");audio.play();}</script><a href="#A1Acura RSX SH_"><img src="bilder/NFSU2/A1Acura RSX SH_.jpg" id="A1Acura RSX SH_" width="220" height="120" onclick="play()"><audio id="sd_00143" src="sd_00143.mp3"></audio></a>

<script>function play() {var audio = document.getElementById("Sexy Beam");audio.play();}</script><a href="#B4Audi A3 nude tits_"><img src="bilder/NFSU2/B4Audi A3 nude tits_.jpg" id="B4Audi A3 nude tits_" width="220" height="120" onclick="play()"><audio id="Sexy Beam" src="Sexy Beam.wav"></audio></a>

Beide Bilder spielen beim Anklicken Sexy Beam.wav. Kann jemand die multiplen Audiodateiaufrufe in einer einzigen HTML-Seite korrigieren?

...zur Frage

Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde.

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>

...zur Frage

Webseite: Kennt sich jemand damit aus?

Und zwar brauche ich kurz hilfe. Ich möchte dass man im Registrier-Formular ein Profilbild auswählen kann. Wenn man Angemeldet ist, soll das eigene PB oben rechts in der Ecke angezeigt werden.

HTML-Code (Formular):

<div class="container">
      <div class="box">
		  <div class="scroll">
        <form action="" method="POST" class="login-email">
          <p class="login-text">Registrieren</p>
		<div class="profile-pic-div">
            <img src="img/default-pb.jpg" id="photo">
			<input type="file" id="file">
			<label for="file" id="uploadBtn">Profilbild Wählen</label>
          </div>
          <div class="input-group">
            <input type="text" placeholder="Benutzername" name="username" value="<?php echo $username; ?>" required>
          </div>
          <div class="input-group">
            <input type="email" placeholder="Email" name="email" value="<?php echo $email; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Passwort" name="password" value="<?php echo $_POST['password']; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Wiederhole das Passwort" name="cpassword" value="<?php echo $_POST['cpassword']; ?>" required>
          </div>
          <div class="input-group">
           <button name="submit" class="login-btn">Registrieren</button>
          </div>
          <p class="login-register-text">Du hast bereits ein Konto? <a href="https://www.klexxstube.com/anmelden">Melde dich an</a></p>
        </form>
			 </div>
      </div>
    </div>

Hier der Code zum Wechseln vom PB (JS):

const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');


file.addEventListener('change', function() {
	const choosedFile = this.files[0];
	
	if (choosedFile) {
		
		const reader = new FileReader();
		
		reader.addEventListener('load', function() {
			img.setAttribute('src', reader.result);
		});
		
		reader.readAsDataURL(choosedFile);
	}
});

Vielleicht habt ihr auch eine komplett andere Version wie man so etwas schaffen kann.

LG Klexxsy

...zur Frage

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen