Afficher les objets JSON renvoyés avec jQuery

Question

Je n'arrive pas à trouver comment afficher certains objets JSON de retour.

Mon script fonctionne comme ceci:

Je fais un appel ajax, envoyer des params à un contrôleur CodeIgniter où je suis traitement avec un modèle, ce qui rend certaines requêtes vers une base de données, puis retourner le json_encoded lignes à la fonction de rappel ajax. Cela fonctionne très bien.

Voici ce que je veux faire maintenant et voici où je suis coincé. Je veux que les nouveaux objets JSON (contenant des lignes de base de données) "remplacent" les anciennes lignes dans une table html. Je veux donc mettre à jour la table en fonction des paramètres que je suis en train de dépasser mais seulement dans l'esprit du corps. Je suis nouveau chez jquery, donc j'ai essayé peu de choses. J'ai essayé de parcourir les données json et d'utiliser la fonction $ .html (string) mais je suppose que cela remplacera tout et qu'il affichera finalement le dernier objet (Ai-je raison?). Donc, je me demande comment, dans un sens général, je le ferais?

Answer 1

$.ajax({ 
    type: 'GET', 
    url: 'someSite.com/someEndpoint' 
    data: xyz. 
    success: function(response) { 
     //lets say you have an object like this: object = { data: { ... } } 
     var html = ''; 
     for(var i = 0; i<response.data.length; i++) { 
      html += '<tr><td>'+response.data[i].title+'</td></tr>'; 
     } 
     $('#someTable tbody').html(html); 
    } 
}); 

Answer 2

Vous n'avez pas ont pour retourner des objets JSON dans une requête AJAX. Essayez de définir le paramètre de configuration data_type pour l'appel $ .ajax à "html" (ou laissez-le vide - jQuery est vraiment bon pour le déterminer à partir des données de réponse).

Je compense habituellement la partie <tbody>...</tbody> d'une vue à sa propre vue partielle. Ensuite, le chargement de la page "original" peut l'utiliser, tout comme un appel AJAX de mise à jour.

Le seul astérisque à ceci est si vous avez besoin d'une sorte de réponse orientée objet avec le HTML. Je habituellement faire quelque chose comme ceci:

{ 
    "stat": "ok", 
    "payload": "<tr><td>row1</td></tr><tr><td>row2</td></tr>" 
} 

Et puis dans la fonction ajax succès:

$.post('/controller/action', { some: 'data' }, function(response) { 
    $('#my_table tbody').append(response.payload); 
}, 'json'); 

Answer 3

Quels sont les params votre passage dans? Par exemple, vous pouvez utiliser un champ de sélection ou de saisie pour déclencher un appel ajax et transmettre sa valeur en tant que param.

var tableObj = { 

    var init : function(){ 
     //check that your selectors id exists, then call it 
     this.foo(); 
    }, 
    foo : function(){ 

     var requestAjax = function(param){ 
      var data = {param : param} 
      $.ajax({ 

       data : data, 
       success : function(callback){ 
        console.log(callback);//debug it 

        $("tbody").empty();//remove existing data 

        for(var i =0; i < callback.data.length; i++){}//run a loop on the data an build tbody contents 

        $("tbody").append(someElements);//append new data 
       } 
      }); 
     } 
     //trigger event for bar 
     $("#bar").keyup(function(){ 
       requestAjax($(this).val()); 
     }); 
    } 

} 

$(function(){ 
    tableObj.init(); 
}) 

Votre méthode php

public function my_method(){ 
    if($this->input->is_ajax_request()) 
    { 
     //change the output, no view 
     $json = array(
      'status' => 'ok', 
      'data' => $object 
     ); 

     $this->output 
      ->set_content_type('application/json') 
      ->set_output(json_encode($json)); 
    } 
    else 
    { 
     show_404(); 
    } 
}