JavaScript Lesen von JSON-Ergebnis von AJAX-Antwort

Question

Ich habe eine Javascript-Datei, die einen AJAX-Aufruf an eine PHP-Datei auf dem Server macht, die JSON-codierte Daten zurückgibt. Die PHP-Datei kann entweder zurückgeben einen Erfolg oder einen Misserfolg je mit etwa einem Dutzend verschiedenen Nachrichten wie folgt:

if (something here) { 
    if(something else here) { 
     if(more tests here) { 
      $response['success'] = 'Successfully did something.'; 
     } else { 
      $response['success'] = 'Successfully made this work'; 
     } 
    } else { 
     $response['error'] = 'Failed to make the donuts.'; 
    } 
} else { 
    $response['error'] = 'I need more information!'; 
} 
echo json_encode($response); 
exit; 

ich habe Javascript/jquery am vorderen Ende, die für den Reaktion Fehlerzustand prüfen und Anzeigen eine Warnmeldung und Durchführung einiger anderer relevanter Aktionen abhängig.

$.post(ajaxurl, data, function(response) { 
    if(response.hasOwnProperty("success")) { 
     if($(this).is(":checked")) { 
      $(this).removeAttr("checked"); 
     } else { 
      $(this).attr("checked", "true"); 
     } 
     alert(response["success"]); 
    } else { 
     alert("Sorry, something went wrong. \nError: " + response["error"]); 
    } 
}); 

Das Problem ist, dass egal, wie ich für den Erfolg Zustand überprüfen es zeigt immer die Fehlermeldung mit einer response['error'] von undefined I-Tests für typeOf response['success'] != "undefined" und eine Reihe von anderen Möglichkeiten versucht haben, wenn der Erfolg Wert zu sehen, ist eingestellt, aber nichts scheint zu funktionieren. Ich bekomme eine Antwort, dass, wenn ich console.log es so aussieht: { "success", "Successfully did something." } Was mache ich falsch beim Lesen der Nachricht?

Answer 1

Sie müssen parse JSON-Antwort vor dem Gebrauch

$.post(ajaxurl, data, function(response) { 
    var response=JSON.parse(response); 
    //then your code 
}); 

ODER

Sie den Datentyp Eigenschaft als json in der AJAX-Aufruf wie verwenden:

$.post(ajaxurl, data, function(response) { 
    //your code 
}, "json"); 

Answer 2

einfach bearbeiten Ihr JavaScript-Code, indem Sie am Ende den Datentyp hinzufügen (siehe letzten Parameter im Folgenden) Ode Snippet) siehe https://api.jquery.com/jQuery.post/

$.post(ajaxurl, data, function(response) { 
    if(response.hasOwnProperty("success")) { 
     if($(this).is(":checked")) { 
      $(this).removeAttr("checked"); 
     } else { 
      $(this).attr("checked", "true"); 
     } 
     alert(response["success"]); 
    } else { 
     alert("Sorry, something went wrong. \nError: " + response["error"]); 
    } 
},'json'); 

Answer 3

Nun haben sich die Jungs über die Antwort gegeben, aber ich habe ein weiteres Problem im Code gefunden:

Ich denke, das Post-Anweisung wird in einem Ereignis aufgerufen Handler eines Kontrollkästchens und Sie möchten den Status dieses Kontrollkästchens nach der Antwort ändern. Aber das this Objekt ist nicht mehr das Kontrollkästchen in der Post-Callback-Funktion, es ist das Post-Objekt. Sie werden feststellen, dass Ihr Code den Status des Kontrollkästchens nach der erwarteten Antwort nicht ändert.

Sie können Ihren Code wie folgt ändern:

var $ele = $(this); 
$.post(url, data, function() { 
... 
if($(this).is(":checked")) { 
      $ele.removeAttr("checked"); 
     } else { 
      $ele.attr("checked", "true"); 
     } 
... 
}, "json"); 

Edit:

Nun, der obige Code nicht elegant genug ist, um für eine unnötige lokale Variable einzuführen und die Callback-Funktion hat das halten lokale Variablen der übergeordneten Funktion im Speicher (als Ergebnis der Schließung), so ist das Folgende eine bessere Wahl:

Answer 4

Verwenden Sie den Parameter dataType in Ihrem Ajax-Aufruf und setzen Sie ihn auf json. Und übrigens, können Sie einfach tun:

alert(response.success); 

Da das zurückgegebene Objekt von Ajax-Aufruf oder dem „Daten“ Callback-Parameter ist eigentlich ein JSON-Objekt, kein Array.