Ergebnis 1 bis 2 von 2
  1. #1
    SkibbaSv ist offline Grünschnabel
    registriert
    08-03-2017
    Beiträge
    1

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

    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.
    Geändert von SkibbaSv (09-03-2017 um 02:47 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.667

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

    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.

Ähnliche Themen

  1. Antworten: 4
    Letzter Beitrag: 14-08-2015, 08:58
  2. [AJAX] Rückgabe eines Javascript object
    Von Dege im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 09-04-2010, 16:59
  3. Problem bei meinem AJAX Object
    Von L4KE 0F F!RE im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 11-11-2008, 17:32
  4. Javascript xml object -> PHP xml object
    Von EMBEE im Forum Serverseitige Programmierung
    Antworten: 4
    Letzter Beitrag: 20-11-2007, 16:12
  5. flash <object> problem
    Von larsson im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 22-11-2002, 00:48

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •