Parse JSON à partir des données de succès de JQuery.ajax
Je ne parviens pas à obtenir le contenu de l'objet JSON à partir d'un appel JQery.ajax. Mon appel:
$('#Search').click(function () {
var query = $('#query').valueOf();
$.ajax({
url: '/Products/Search',
type: "POST",
data: query,
dataType: 'application/json; charset=utf-8',
success: function (data) {
alert(data);
for (var x = 0; x < data.length; x++) {
content = data[x].Id;
content += "<br>";
content += data[x].Name;
content += "<br>";
$(content).appendTo("#ProductList");
// updateListing(data[x]);
}
}
});
});
Il semble que l’objet JSON soit renvoyé correctement car "alert (data)" affiche les informations suivantes.
[{"Id": "1", "Name": "Shirt"}, {"Id": "2", "Name":"Pants"}]
mais quand j'essaie d'afficher l'identifiant ou le nom sur la page en utilisant:
content = data[x].Id;
content += "<br>";
content += data[x].Name;
content += "<br>";
il retourne "non défini" à la page. Qu'est-ce que je fais mal?
Merci pour l'aide.
Les données reviennent en tant que représentation sous forme de chaîne du JSON et vous ne les reconvertissez pas en objet JavaScript. Réglez le dataType sur 'json' pour le convertir automatiquement.
Je vous recommande d'utiliser:
var returnedData = JSON.parse(response);
convertir la chaîne JSON (s’il ne s’agit que de texte) en un objet JavaScript.
Une des façons de vous assurer que ce type d'erreur (en utilisant string au lieu de json) ne se produise pas est de voir ce qui est imprimé dans le alert. Quand tu fais
alert(data)
si data est une chaîne, tout ce qu'il contient sera imprimé. Cependant, si vous imprimez est un objet json. vous recevrez la réponse suivante dans l'alerte
[object Object]
Si c'est la réponse, alors vous pouvez être sûr de pouvoir l'utiliser comme objet (json dans ce cas).
Ainsi, vous devez d'abord convertir votre chaîne en json avant de l'utiliser:
JSON.parse(data)
Cela fonctionne bien, Ex:
.ajax({
url: "http://localhost:11141/Search/BasicSearchContent?ContentTitle=" + "تهران",
type: 'GET',
cache: false,
success: function (result) {
// alert(jQuery.dataType);
if (result) {
// var dd = JSON.parse(result);
alert(result[0].Id)
}
},
error: function () {
alert("No");
}
});
Enfin, vous devez utiliser cette déclaration ...
result[0].Whatever
Eh bien ... vous êtes à peu près aux trois quarts du chemin ... vous avez déjà votre JSON sous forme de texte.
Le problème est que vous semblez gérer cette chaîne comme s'il s'agissait déjà d'un objet JavaScript avec des propriétés relatives aux champs transmis.
Ce n'est pas ... c'est juste une chaîne.
Des requêtes comme "content = data [x] .Id;" sont voués à échouer car JavaScript ne trouve pas ces propriétés attachées à la chaîne qu'il est en train de regarder ... encore une fois, c'est JUST une chaîne.
Vous devriez pouvoir simplement analyser les données au format JSON via ... yup ... la méthode d'analyse de l'objet JSON.
myResult = JSON.parse(request.responseText);
Maintenant, myResult est un objet javascript contenant les propriétés transmises via AJAX.
Cela devrait vous permettre de le gérer comme vous semblez l’essayer.
On dirait que JSON.parse a été ajouté quand ECMA5 a été ajouté, donc tout ce qui est assez moderne devrait pouvoir le gérer de manière native ... si vous devez manipuler des fossiles, vous pouvez également essayer des bibliothèques externes pour le gérer, telles que jQuery ou JSON2 .
Pour mémoire, Andy E a déjà répondu à cette question pour quelqu'un d'autre HERE .
edit - Vu la demande de 'sources officielles ou crédibles', et probablement l'un des codeurs que je trouve les plus crédibles serait John Resig ~ - ECMA5 JSON ~ J'aurais lié à la spécification ECMA5 actuelle concernant le support JSON natif, mais je préférerais renvoyer quelqu'un à un maître tel que Resig plutôt qu'à une spécification sèche.
vous pouvez utiliser la méthode jQuery parseJSON:
var Data = $.parseJSON(response);
Essayez la fonction jquery each pour parcourir votre objet json:
$.each(data,function(i,j){
content ='<span>'+j[i].Id+'<br />'+j[i].Name+'<br /></span>';
$('#ProductList').append(content);
});
type d'entrée Bouton
<input type="button" Id="update" value="Update">
J'ai posté avec succès un formulaire avec AJAX en Perl. Après l'envoi du formulaire, le contrôleur renvoie une réponse JSON comme ci-dessous.
$(function(){
$('#Search').click(function() {
var query = $('#query').val();
var update = $('#update').val();
$.ajax({
type: 'POST',
url:'/Products/Search/',
data:{
'insert' :update,
'query' :address,
},
success: function(res){
$('#ProductList').empty('');
console.log(res);
json=JSON.parse(res);
for(var i in json){
var row=$('<tr>');
row.append($('<td id='+json[i].Id+'>').html(json[i].Id));
row.append($('<td id='+json[i].Name+'>').html(json[i].Name));
$('</tr>');
$('#ProductList').append(row);
}
},
error: function() {
alert("did not work");
location.reload(true);
}
});
});
});
À partir de l'API jQuery: avec le paramètre dataType, si aucune n'est spécifiée, jQuery tentera de l'inférer avec $.parseJSON() en fonction du type MIME (le type MIME du texte JSON est "application/json" ) de la réponse (dans la version 1.4, JSON générera un objet JavaScript).
Vous pouvez également régler dataType sur json pour le convertir automatiquement.
analyser et le convertir en objet js c'est tout.
success:function(response){
var content="";
var jsondata= JSON.parse(response);
for(var x=0;x<jsonData.length;x++){
content += jsondata[x].Id;
content += "<br>";
content += jsondata[x].Name;
content += "<br>";
}
$("#ProductList").append(content);
}
Je ne suis pas sûr de ce qui ne va pas avec votre installation. Le serveur ne configure peut-être pas correctement les en-têtes. Pas certain. Comme un coup de long, vous pouvez essayer cela
$.ajax({
url : url,
dataType : 'json'
})
.done(function(data, statusText, resObject) {
var jsonData = resObject.responseJSON
})