✔ .post funktioniert mit IE aber nicht mit Safari und Firefox

gupi · 24. September 2010

Hallo,

Meine AJAX Anwendung will unter Safari und Firefox nicht funktionieren. Der Explorer macht genau dass was ich möchte. Weder Safari (Fehlerkonsole) oder Firefox zeigen einen Fehler an!

HTML (Sender)

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var ajxFile = "ajx.php";

function send(){
  var data = $('form#form1').serialize();
  alert(data);
  $.post(ajxFile,data,function(rdata){
    $('#ergebnis').html(rdata);
    }   
  )
};
</script>
<title>AJAX Test</title>
</head>
<body>
My little AJAX test<br>
<div id='d1'>
<form id="form1" method="post" action="">
<input name='f1' type='hidden' value='4711'>
Please enter a number:<br>
<input name="zahl1" type="text" id="zahl1" size="8">
<br>
<br>
Please enter some text:<br>
<input name="text1" type="text" id="text1" size="30">
<br>
<br>
Favorite color?<br>

<input type="radio" name="radio" id="red" value="red">red
<br>

<input type="radio" name="radio" id="green" value="green">green
<br>

<input type="radio" name="radio" id="blue" value="blue">blue
<br>

<input type="radio" name="radio" id="yellow" value="yellow">yellow
<br>
<br>
<button onclick='send()' >Send</button>
<br>
Response: <br><span id="ergebnis">No response yet</span>
</form></div>
<br></body>
</html>

und so sieht der Empfänger "ajx.php" aus:

PHP:

<?php
$ajxData = $_POST;
echo "<pre>".print_r($ajxData,TRUE)."</pre>";
?>

Anscheinend wird bei Safari und FF das Empfängerskipt gar nicht aufgerufen. Um dies festzustellen habe ich einfach etwas in eine Datei geschrieben sobald das Skript aufgerufen wurde:

PHP:

<?php
$ajxData = $_POST;
echo "<pre>".print_r($ajxData,TRUE)."</pre>";
$file = fopen("ajax.txt","a+");
fwrite($file,"neuerSatz");
fwrite($file,print_r($ajxData,TRUE));
fclose($file);
?>

Hab ich hier irgend etwas übersehen oder falsch gemacht?

Gruß
Gunter

CPoly · 24. September 2010

1.Wenn du schon jQuery benutzt, dann binde auch lieber den Eventhandler per jQuery

Javascript:

$("button").click(function(e) {

});

2. Du musst auf dem Server keine Datei erstellen, um das zu Testen. Nimm einfach ein Plugin z.B. Firebug oder HTTPFox um den Datenverkehr zu beobachten.

3. Wenn du 2. befolgst, siehst du, dass die Anfrage gesendet und sofort abgebrochen wird, weil der Klick des Buttons ein Postback auslöst und die Seite neu lädt.

4. Um 3. zu verhindern musst du false zurückgeben oder im Click-Handler des Buttons "e.preventDefault()" als aller erstes Aufrufen.

Edit:

Neue Fassung

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var ajxFile = "ajx.php";

function send(){
	var data = $('form#form1').serialize();
	alert(data);
	$.post(ajxFile,data,function(rdata) {
		$('#ergebnis').html(rdata);
	});
};

$(document).ready(function() {
	$("#derButton").click(function(e) {
		e.preventDefault();
		send();
	});
});
</script>
<title>AJAX Test</title>
</head>
<body>
My little AJAX test<br>
<div id='d1'>
<form id="form1" method="post" action="">
<input name='f1' type='hidden' value='4711'>
Please enter a number:<br>
<input name="zahl1" type="text" id="zahl1" size="8">
<br>
<br>
Please enter some text:<br>
<input name="text1" type="text" id="text1" size="30">
<br>
<br>
Favorite color?<br>

<input type="radio" name="radio" id="red" value="red">red
<br>

<input type="radio" name="radio" id="green" value="green">green
<br>

<input type="radio" name="radio" id="blue" value="blue">blue
<br>

<input type="radio" name="radio" id="yellow" value="yellow">yellow
<br>
<br>
<button id="derButton">Send</button>
<br>
Response: <br><span id="ergebnis">No response yet</span>
</form></div>
<br></body>
</html>

Da fällt mir noch 5. ein:
5. Verwende $(document).ready();

Edit2:
6. Im IE funktioniert es, weil er sich im Zusammenhang mit dem button-Element falsch verhält.

✔ .post funktioniert mit IE aber nicht mit Safari und Firefox

gupi

Grünschnabel

CPoly

Mitglied Weizenbier

Neue Beiträge