ajax-Problem - Statt Text in der Ausgabe nur [object object]

**SkibbaSv** · 08-03-2017, 17:25

Hallo!

Ich versuche mittels jquery und ajax ein div automatisch mit wechselnden Inhalten zu füllen, die in einer aufzurufenden php-Datei generiert werden müssten. So weit, so einfach eigentlich. Leider bekomme ich statt des Textes im Browser immer nur [object object] angezeigt. Ich bin absoluter Neuling im Bereich ajax und habe diverse Google-Suchen bemüht. Aber egal was ich auch in der data-Funktion bisher eingetragen habe, bekomme ich es einfach nicht hin.

Hier einmal der stark vereinfachte Quelltext. Um andere Fehlerquellen auszuschließen, habe ich den auch genau so erfolglos getestet.

test.html:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Ajax Wechsel-Div aus php-Datei</title>
		<style type="text/css">
			h1 {
				font-size: large;
			}
			div {
				color: #00008b;
				padding: 20px;
				width: 80%;
			}
			#change_content {
				background-color: #000;
				color: #fff;
				padding: 20px;
				width: 80%;
				min-height: 50px;
			}
		</style>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script type="text/javascript">
			window.onload = function(){
                var loop = setInterval(function(){key=changeDiv()},1000);
            }
			var text1 = $.ajax({
				type: 'GET',
				url: 'ajax.php',
				data: 'ajaxget=content1',
				dataType: 'html',
				success: function(data) {
					html(data);
					console.log(data);
				},
				error: function( req, status, err ) {
					console.log( 'Something went wrong', status, err );
				}
			});
			var text2 = $.ajax({
				type: 'GET',
				url: 'ajax.php',
				data: 'ajaxget=content2',
				dataType: 'html',
				success: function(data) {
					html(data);
					console.log(data);
				},
				error: function( req, status, err ) {
					console.log( 'Something went wrong', status, err );
				}
			});
			var text3 = $.ajax({
				type: 'GET',
				url: 'ajax.php',
				data: 'ajaxget=content3',
				dataType: 'html',
				success: function(data) {
					html(data);
					console.log(data);
				},
				error: function( req, status, err ) {
					console.log( 'Something went wrong', status, err );
				}
			});
			/*
			var text1 = [
                'div-content 1 ------'
            ];
			var text2 = [
                'div-content 2 ------'
            ];
			var text3 = [
                'div-content 3 ------'
            ];
			*/
            var content = [
                text1,
                text2,
                text3
            ];

            var key=0;

            function changeDiv(){
                document.getElementById('change_content').innerHTML = content[key];
                
				key = (++key == content.length)?0:key;
                return key;
            }
		</script>
	</head>

	<body>
		<h1>Wechsel-Div per Ajax (jQuery) aus php-Datei</h1>
			<div>Im n&auml;chsten Div sollen automatisch wechselnde Inhalte erscheinen, welche in einer php-Datei aufbereitet werden.</div>
		<div id="change_content"></div>
	</body>
</html>

ajax.php:

PHP-Code:


<?php

    if ($_GET["ajaxget"]=='content1') {

        echo '<b>div-content 1 aus php-Datei ------</b>';

    } else if ($_GET["ajaxget"]=='content2') {

        echo '<b>div-content 2 aus php-Datei ------</b>';

    } else if ($_GET["ajaxget"]=='content3') {

        echo '<b>div-content 3 aus php-Datei ------</b>';

    }

?>

Wenn ich die Variante mit dem Text aus der php-Datei mittels ajax() auskommentiere und stattdessen den bisher auskommentierten Teil nutze, wechselt er brav im Sekundentakt von "div-content 1 ------" aus "div-content 2 ------", usw.
Wenn ich die Daten allerdings aus der php-Datei nehmen möchte, kommt eben wie erwähnt immer [object object].
In der Web-Konsole wird mir jedoch der gewünschte Text angezeigt.

Wo mache ich meinen Denkfehler? Bin für jedes noch so kleine Löchlein, welches ihr in mein Brett vor dem Kopf bohren könnt dankbar.

LG, Sven

Update: Okay, schiebe ich ein

Code:

console.log(text1);

mit ein, zeigt er mir ein object-array an. Der Wert, den ich eigentlich erhalten möchte und mit

Code:

console.log(data);

ja auch angezeigt wird, verbirgt sich also hinter dem Schlüssel 'responseText'. Nur leider hilft mir auch das nicht weiter. Jegliche probierten Varianten in der Art

Code:

text1 = data.responseText;

bringen weiter keine Lösung. Es scheint, dass die Variabel direkt wieder als undefined gilt, sobal ich ausserhalb der ajax()-Funktion operiere. Innerhalb zeigt er alles korrekt an.

Update-2: Dieser Code funktioniert zumindest erst einmal:

HTML-Code:

			var text1 =
			$.ajax({
				type: 'GET',
				url: 'ajax.php',
				data: 'ajaxget=content1',
				dataType: 'text',
				async: false,
				complete: function(data) {
					data;
				},
				error: function( req, status, err ) {
					console.log( 'Something went wrong', status, err );
				}
			}).responseText;

Das Script macht nun genau das, was es soll. Leider ist async deprecated. Also sollte ich morgen ausgeschlafen eine Lösung ohne die Nutzung desselben finden. Falls jemand einen Tipp hat wäre er höchst willkommen.

**kkapsner** · 09-03-2017, 15:37

Wenn dataType: "text" ist, sollte eigentlich im complete-Event der data-Parameter das HTML als Text enthalten.

Aber was macht denn eigentlich genau deine Funktion html()? Wo ist die überhaupt definiert?

PS: auch ohne async kannst du im complete über this.responseText auf den Antwortstring zugreifen.