2012-05-18 3 views
-1

Mon appel ajax renvoie avec succès les données d'une base de données, mais je ne peux pas comprendre comment analyser le json et l'afficher correctement. Voici mon appel ajax:affichage de la réponse json de jquery appel ajax

$('#cardText').change(function(){ 
      if($('#cardText').val().trim().length == 9) 
       { 
        $.ajax({ 

         url: 'components/Person.cfc', 

         //GET method is used 
         type: "POST", 

         //pass the data   
         data: { 
          method: "getGroup", 
          uid: $('#cardText').val(), 
          }, 
         datType: "json", 

         success: function(response) { 

          var resp = $.trim(response); 
          $('#form_result').html(resp); 
         }, 

         error: function(jqXHR, exception) { 
          if (jqXHR.status === 0) { 
           alert('Not connect.\n Verify Network.'); 
          } else if (jqXHR.status == 404) { 
           alert('Requested page not found. [404]'); 
          } else if (jqXHR.status == 500) { 
           alert('Internal Server Error [500].'); 
          } else if (exception === 'parsererror') { 
           alert('Requested JSON parse failed.'); 
          } else if (exception === 'timeout') { 
           alert('Time out error.'); 
          } else if (exception === 'abort') { 
           alert('Ajax request aborted.'); 
          } else { 
           alert('Uncaught Error.\n' + jqXHR.responseText); 
          } 
         } 
       }); 
      } 
     }); 

Et il retourne ce qui suit à (div id = « form_result ») mais je ne peux pas comprendre ce que maintenant faire avec les données pour l'afficher correctement:

{"COLUMNS":["PLAN","NAME","ID","ISSUE","TYPE","LASTUSED","BALANCE"],"DATA":[["DINING STAFF CAFE 1919 ","YOUNG, MARIA ",8.03976343E8,"2001-04-02",2.0,"2012-01-27",1]]} 

Toute aide serait appréciée! Gerald

+1

Voulez-vous créer une table de celui-ci? Que voulez-vous avec les données? –

+0

Vous avez un typeo: 'datType' devrait être' dataType' –

+0

@MestekWebmaster le 'dataType' par défaut à JSON, ce n'est pas le problème –

Répondre

0

Depuis que vous obtenez le JSON du côté client, vous pouvez l'envoyer à un plugin JS qui comprend ces données, ou les afficher vous-même avec un moteur de template.

Un moteur de gabarit décent est ce dont vous avez besoin.

départ http://api.jquery.com/category/plugins/templates/, http://handlebarsjs.com/ ou https://github.com/leonidas/transparency

+0

Mon vote pour JS templates est des modèles de fermeture google. https://developers.google.com/closure/templates/docs/helloworld_js –

+0

@JuanMendes Pourquoi votez-vous pour des modèles de fermeture de google? – Henry

+0

En raison de sa facilité. Je n'aime pas les modèles côté client qui définissent des modèles dans le fichier HTML et analyser les modèles sur le client. Cela rend difficile de les réutiliser sur plusieurs pages. Les modèles de fermeture Google exécutent une étape de génération sur votre fichier modèle et génèrent une fonction JS que vous pouvez appeler à partir de votre script pour générer le code HTML et le réutiliser facilement sur plusieurs pages. –

0

vous pouvez le faire en analysant les données JSON de cette façon

var ReturnedData = jQuery.parseJSON(response); 

alors vous pouvez accéder à des données comme un objet simple et tableau-à-dire

var Col1 = ReturnedData.COLUMNS[0]; // will provide you first COLUMN value i.e. "PLAN" 
var Data1= ReturnedData.DATA[0]; // will provide you first DATA value i.e. "DINING STAFF  CAFE 1919" 
Au-dessus de deux lignes sont juste un exemple que comment vous pouvez saisir vos données

+0

Cela ressemble à ce que je veux, mais après avoir corrigé ma faute de frappe dans dataType, je reçois maintenant une parseerror - est-ce que je fais le json correctement? – user1371409

+0

Pour connaître le problème, suivez les étapes suivantes. 1) observateur votre format json retourné, une erreur d'analyse se produit principalement en raison d'un JSON mal formé 2) essayez JSON.parse (réponse) qui est la fonction native de jquery.parseJSON 3) appliquer un try catch et observer l'erreur – Tanveer

0

Il semble que vous ayez simplement besoin de faire quelque chose avec les données JSON renvoyées par le serveur. Si vous voulez l'analyser dans un format plus raisonnable, comme un hachage, voir mon violon ici: http://jsfiddle.net/skamansam/T7WbK/25/. Si vous voulez simplement indiquer à l'utilisateur les données qu'il/elle a présenté était correcte, changer la ligne qui se lit comme suit:

$('#form_result').html(resp);

à

$('#form_result').html("Form submitted successfully!");

L'idéal est que vous changez réponse du serveur à quelque chose de logique, comme une réponse html au lieu de json. Cela semble être plus une question de préférence que de technicité ou de protocole.

0

semble qu'il y ait une virgule supplémentaire dans « data » Essayez de supprimer la virgule après uid: $('#cardText').val()

Questions connexes