Hallo Leute,
da bin ich wieder mit meinen Ajax-Anfänger-Problemen...
Ich habe eine Seite mit 3 Buttons und möchte wenn man auf einen Button kickt auf meiner Seite ausklicken auf welchen Button man geklickt hat.
Leider kommt bei mir immer eine Fehlermeldung und ich weiß nicht ganz woran es liegt...
Hier mein Code:
und so sieht die 2te php site aus:
da bin ich wieder mit meinen Ajax-Anfänger-Problemen...
Ich habe eine Seite mit 3 Buttons und möchte wenn man auf einen Button kickt auf meiner Seite ausklicken auf welchen Button man geklickt hat.
Leider kommt bei mir immer eine Fehlermeldung und ich weiß nicht ganz woran es liegt...
Hier mein Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajax PU </title>
<script type="text/javascript" src="js/prototype.js" ></script>
<script type="text/javascript" src="js/scriptaculous.js" ></script>
<style type="text/css">
body {
color:black;
background-color:#CCC;
font-family:Verdana, Geneva, sans-serif;
}
h1 {
text-align:center;
}
h2 {
text-align:center;
}
img{
border:5px solid #AAAAAA;
}
.kasterl {
background-color:#AAAAAA;
border:1px solid red;
cursor:pointer;
float:left;
height:58px;
margin:10px;
padding-top:42px;
text-align:center;
width:100px;
}
#button1 {
border:4px solid blue;
cursor:pointer;
float:left;
margin:10px;
padding-bottom:40px;
padding-top:40px;
text-align:center;
width:100px;
background-color:#AA0000;
}
#button2 {
border:4px solid blue;
cursor:pointer;
float:left;
margin:10px;
padding-bottom:40px;
padding-top:40px;
text-align:center;
width:100px;
background-color:#00AA00;
}
#button3 {
border:4px solid blue;
cursor:pointer;
float:left;
margin:10px;
padding-bottom:40px;
padding-top:40px;
text-align:center;
width:100px;
background-color:#00AAAA;
}
</style>
</head>
<div id="button1" title="1"><a href="javascript:setRequest('1')">Button 1</a></div>
<div id="button2" title="2"><a href="javascript:setRequest('2')">Button 2</a></div>
<div id="button3" title="3"><a href="javascript:setRequest('3')">Button 3</a></div>
<br />
<div id="content"></div>
<script type="text/javascript">
<!--
var request = false;
// Request senden
function setRequest(value) {
// Request erzeugen
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // Mozilla, Safari, Opera
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
} catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
} catch (e) {}
}
}
// überprüfen, ob Request erzeugt wurde
if (!request) {
alert("Kann keine XMLHTTP-Instanz erzeugen");
return false;
} else {
var url = "updateSite.php";
// Request öffnen
request.open('post', url, true);
// Requestheader senden
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Request senden
request.send('name='+value);
// Request auswerten
request.onreadystatechange = interpretRequest;
}
}
// Request auswerten
function interpretRequest() {
switch (request.readyState) {
// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
case 4:
if (request.status != 200) {
alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
} else {
var content = request.responseText;
// den Inhalt des Requests in das <div> schreiben
document.getElementById('content').innerHTML = content;
}
break;
default:
break;
}
}
//-->
</script>
</body>
</html>und so sieht die 2te php site aus:
PHP:
<?php
header('Content-Type: text/html; charset=utf-8'); // sorgt für die korrekte Kodierung
header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0'); // ist mal wieder wichtig wegen IE
$name = strtoupper($_POST['name']);
echo $name;
?>
Zuletzt bearbeitet:
