[FRAGE] Mehrere Links übergeben oder Id ? Ajax

1

111111

New member
Hallo

Darf ich etwas fragen? :rolleyes: :confused:

Und zwar ich will wenn jemand auf Text/Link: iPhone, iPad oder iMac per Maus klickt, das sich in einem leeren div Text ändern. Also für iPhone soll ein Text erscheinen und für iPad ein anderer und für iMac Link wieder etwas anderes.

HTML: 
 <ul style="width:160px; border: 2px solid red; padding:15px;">
  	 
  	 <li><a href="javascript:anfordern()">iPhone</a></li>
  	  <li><a href="javascript:anfordern()">iPad</a></li>
  	  <li><a href="javascript:anfordern()">iMac</a></li>
  	
  	</ul>




PHP: 
<?php
header('Content-Type: text/html; charset=utf-8');
echo "<b>Lorem Ipsum - und so weiter....."; 
?>


AJAX Code:
Code: 
var rq;
  
  function anfordern() {
  	rq = new XMLHttpRequest();
  	rq.open("post", "ax2.php", true);
  	rq.send(null);
  	rq.onreadystatechange = auswerten;	
  }
  
  function auswerten() {
     if (rq.readyState == 4 && rq.status == 200) {
     	document.getElementById("content").innerHTML = rq.responseText;
     }
  
  }

Es funktioniert nur....
Jetzt wenn ich auf iPhone, iPad oder iMac klicke erscheint jedes mal "Lorem Ipsum - und so weiter....." wie kann ich es ändern, damit für iPad und iMac Text etwas anderes erscheint ? per ID oder wie... i don't know...:rolleyes:
 
Mein Vorschlag an einem Beispiel:
<li onclick="anfordern('iphone')">iPhone</li> <!-- a href nur, wenn es wirklich ein Link ist. Optik mit CSS machen -->
HTML: 
  function anfordern(geraet) {
  	rq = new XMLHttpRequest();
  	rq.open("post", "ax2.php?geraet="+geraet, true);
  	rq.send(null);
  	rq.onreadystatechange = auswerten;	
  }
Code: 
<?php 
header('Content-Type: text/html; charset=utf-8'); 
echo ($_POST['geraet'] == 'iphone' ? "<b>Lorem Ipsum - und so weiter....." : hier die anderen Abfragen);  
?>
 
Mein Vorschlag: den User-Agent mitzusenden und serverseitig die Unterscheidung durchzuführen. So braucht der User gar keinen Link klicken, sondern das Gerät wird automatisch erkannt:
HTML: 
<div id="content"></div>

<script>
function getText(url, callback) {
	var xhr;
	xhr = new XMLHttpRequest();
  	xhr.open("POST", url, true);
  	xhr.onreadystatechange = function(){
		if(xhr.readyState === 4){
			if(xhr.status === 200) {
				callback(xhr.responseText);
			}
			else{
				console.error("XMLHttpRequest failed. HTTP status code: " + xhr.status + "\n URL: " + url + "\n Sent data: " + navigator.userAgent);
			}
		}
	}
	xhr.send("useragent=" + navigator.userAgent);
}

getText("ax2.php",
	function(response){
		document.getElementById("content").innerHTML = response;
	}
);
</script>

PHP: 
<?php
	$text_iphone = "Text für iPhone-Benutzer";
	$text_ipad = "Text für iPad-Benutzer";
	$text_mac = "Text für iMac-Benutzer";
	$text_other = "Standard-Text für andere Geräte";

	header("Content-Type: text/html; charset=utf-8");
	if(!empty($_POST["useragent"])){
		$useragent = $_POST["useragent"];
		$iphone = stripos($useragent, 'iphone');
		$ipad = stripos($useragent, 'ipad');
		$mac = stripos($useragent, 'mac');
		if($iphone !== false){
			echo $text_iphone;
		}
		else if($ipad !== false){
			echo $text_ipad;
		}
		else if($iphone === false && $ipad === false && $mac !== false){
			echo $text_mac;
		}
		else{
			echo $text_other;
		}
	}
?>

Für eine genauere Erkennung oder feinere Unterscheidung für mehr Geräte kannst du auch die Funktion get_browser() verwenden.



PS:
mikdoe schrieb:
Code: 
echo ($_POST['geraet'] == 'iphone' ? "<b>Lorem Ipsum - und so weiter....." : hier die anderen Abfragen);
Zum Vergrößern anklicken....
Die Klammern sind nicht falsch, aber unnötig.
 
Hallo

Ich habe es gestern Abend (als Test) so gemacht...und es hat funktioniert.

HTML: 
 <li><a href="javascript:anfordern('iPhone', 'Text 123)">iPhone</a></li>
  	  <li><a href="javascript:anfordern('iPad', 'Text 2-blabla')">iPad</a></li>
  	  <li><a href="javascript:anfordern('iMac', 'und weiter schreiben...')">iMac</a></li>


Code: 
function anfordern(nachname, text_b) {
  	rq = new XMLHttpRequest();
  	rq.open("post", "ax2.php", true);
  	rq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  	rq.send("nn=" + nachname + "&textb=" + text_b);
  	rq.onreadystatechange = auswerten;	
  }
  
  function auswerten() {
     if (rq.readyState == 4 && rq.status == 200) {
     	document.getElementById("content").innerHTML = rq.responseText;
     }
  
  }


PHP: 
echo strtoupper($_POST["nn"]). ", " . $_POST["textb"];


Aber nichtsdestotrotz, werde ich die Beispiele von euch auch ausprobieren. :lemo:

Danke :)
 
Wieso sendest du den Text an das Serverscript? Das ist völlig unnötiger Traffic. Beim Seitenaufbau geht es zum Browser, beim Klick wieder zurück zum Server und dann nochmal zum Browser. Redundanz pur, da sträuben sich meine Nackenhaare :)
 
Ein globales XHR-Objekt ist keine gute Idee (globale Variablen prinzipiell nicht - aber ein XHR besonders).
Mach' das in der Funktion anfordern zu eine lokalen Variable und in auswerten() kannst du über this darauf zugreifen.
 
Beitrag 4 musste erst freigeschaltet werden, Julian. Darauf bezog ich mich und Korbinian vermutlich auch. Gestern war der noch nicht freizuschalten.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben