Comment faire pour ajouter des objets à partir de JSON à un div en HTML?
J'ai essayé d'obtenir JSON à partir d'un Github profil de l'utilisateur et le poste de mannequin de base de données, puis de les afficher l ' "image", "nom d'utilisateur" et "nom réel" avec un div créé par jQuery dans une div en html.
Mais je suis coincé à l'ajout de mes objets de JSON à la div. Je sais que je suis le format de mal, mais je ne sais pas le bon format, quelqu'un peut-il m'aider? Merci!!!!
Voici le code Javascript et HTML:
JS:
$(document).ready(function() {
var datas = $.get("https://api.github.com/users/iwenyou", function(infos) {
$.ajax({
type: "POST",
url: "https://httpbin.org/post",
data: infos,
dataType: "json",
success: function(data) {
$(".container").append("<div>datas['avatar_url']+datas.login+datas.name</div>");
}
});
});
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
- Qu'essayez-vous de réaliser? maintenant vous ajoutez un div avec un texte fixe. Essayer de donner un exemple json et l'extrait de code html
Vous devez vous connecter pour publier un commentaire.
Tout d'abord le paramètre que vous définissez dans le
$.ajax
de rappel estdata
, pasdatas
et les propriétés que vous essayez d'accéder à sont en laform
objet de la réponse, si vous avez besoin d'utiliserdata.form
pour y accéder.Enfin, et plus important encore, vous avez besoin de concaténer la chaîne HTML que vous créez avec les valeurs de l'objet récupéré. Essayez ceci:
JS:
HTML:
Noter que le
name
propriété est vide dans la réponse, de sorte qu'il n'apparaît pas dans le code HTML généré.Ne mets pas les balises HTML dans le Code JavaScript.
Mettez tous vos codes HTML à l'intérieur du conteneur comme
Maintenant remplir les données de votre ajax succès fonction.
Vous ne pouvez pas accéder à l'objet de données dans la chaîne de mode. Vous devez mettre fin à la chaîne d'ajouter du contenu à partir de votre objet comme suit:
JS:
Essayer cette
datas['avatar_url']
?datas.login
etdatas.name
également de retourundefined
.vous pouvez essayer ceci : -
https://jsfiddle.net/zt2j1h3a/2/