jQuery meilleur moyen d'obtenir JSON avec ajax

Question

Je développe un eshop et le client veut ajax. Je pense que c'est une mauvaise idée parce que ça va être lent. Cependant, lors de la visualisation des produits, il y a quelques filtres sur la gauche. Lorsqu'un utilisateur sélectionne un filtre, un autre doit être désactivé. Par exemple, il peut y avoir des gilets pour les mâles et les femelles, mais la couleur rouge n'est disponible que pour les femelles, donc lorsque l'utilisateur clique sur le mâle, le filtre rouge doit être désactivé. Je me demande quel est le meilleur moyen d'y parvenir. Je n'utiliserais pas ajax pour cela il suffit de charger tous les produits de la catégorie et les filtrer avec Javascript mais je ne peux pas parce que je dois utiliser ajax.

Alors devrais-je faire un appel distinct comme .getJson('filters.php.....', currentFilters, callback)? puis décider quels filtres seront désactivés? (Cela nécessite plus d'exécuter des requêtes à la base de données)

Ou est-il possible d'inclure dans la page de résultats quelque chose comme ceci:

<script type=text/javascript> 
    var data={jsondatagoeshere}; 
</script> 

Je me demande si tous les navigateurs exécuter ce code. Toute autre suggestion?

Answer 1

Les deux fonctionneront correctement, mais tout dépend de la taille des données.

Une autre méthode consiste à filtrer les résultats directement sur la page comme (cacher les éléments sans correspondance):

Exemple rapide:

html

<ul> 
    <li>Item1 <span>tag1, tag2</span></li> 
    <li>Item2 <span>tag1, tag3</span></li> 
</ul> 

css

span { display:none } 

jquery

$(".filter").click(function() { 
    $("ul > li").hide().filter(function() { 
    return $("span", this).text().indexOf("tag1") >= 0; 
    }).show(); 
}); 

Cela va filtrer instantanément et sans avoir à rappeler la base de données plusieurs fois, mais comme je l'ai dit tout dépend de la taille des données.