2015-11-20 3 views
0

Je construis une application web en utilisant django comme service REST, et jquery on front qui récupère des données en utilisant les requêtes AJAX, puis rend ces données en utilisant des fonctions personnalisées. L'objectif principal - l'application ne devrait pas actualiser la page, seuls les appels ajax. Pour l'instant, django ne restitue qu'une seule page statique, et les autres URLs répondent avec des données JSON.Un bon moyen pour un accès direct à la page après l'appel AJAX

urls exemple:

urlpatterns = [ 
    url(r'^api/item/(?P<pk>\d+)/$', ItemView.as_view(), name='item'), 
    url(r'^', IndexView.as_view(), name='index'), 
] 

vues:

class IndexView(View): 
    def get(self, request, pk): 
     return render(request, 'index.html') 

class ItemView(View, ErrorMixin): 
    def get(self, request, pk): 
     try: 
      item = Item.objects.get(pk=pk) 
      return HttpResponse(json.dumps({'status': 'success', 'message': '', 'data': item.serialize()})) 
     except Item.DoesNotExist: 
      return HttpResponse(json.dumps({'status': 'error', 'message': 'invalid item id'})) 

Sur frontend, je suis en utilisant l'API historique de HTML pour définir urls après les appels ajax. Par exemple, pour l'appel ajax sur http://example.com/api/item/1, je vais définir l'URL du navigateur à http://example.com/item/1.

Je suppose, que les utilisateurs peuvent partager de tels liens pour un accès direct aux éléments nécessaires, et je ne sais pas le bon chemin, comment traiter ces demandes, et rendre les données nécessaires.

Je pense qu'il y a 2 façons: La première est d'analyser l'url sur frontend, et de faire un appel ajax, dépend de ce que c'est. Par exemple, si url est http://example.com/item/1, je devrais faire un appel ajax sur http://example.com/api/item/1, et rendre les données retournées.

La deuxième est d'avoir une logique distincte pour la demande get en vue django:

def ItemView(View): 
    def get(self, request): 
     if request.is_ajax(): 
      return HttpResponse(json.dumps({'status': 'success', 'message': '', 'data': item.serialize()})) 
     else: 
      return render(request, 'templates/item.html', {'data': item'}) 

Je suis un peu confus. À mon avis, la deuxième approche n'est pas corrélée avec l'API REST, parce que je ne devrais pas rendre les pages avec des données sur back-end, seulement répondre avec JSON. Aussi, je vais devoir créer plus de modèles.

Et dans la première approche, je vais devoir écrire énorme if-else logique sur front-end, parce que après l'analyse url, j'ai besoin d'appeler la fonction de rendu approprié, dépend de ce que l'appel api était. S'il vous plaît aviser la meilleure approche

+0

si vous voulez changer l'URL sans recharger la page oublier côté serveur, c'est juste la question de savoir comment votre frontend répondra aux appels api spécifiques. Comme il est possible avec jquery, même avec javascript brut, la plupart des gens utiliseraient angularjs ou reactjs pour cela – Nhor

+0

Je suis en train de changer l'url sur frontend en utilisant html history api. Mais quand l'utilisateur ouvre cette URL, je dois rendre la page avec des données spécifiques, que je peux obtenir avec l'appel de l'API. Si je comprends bien votre commentaire, je dois utiliser un routage frontal? – parikLS

Répondre

0

Si vous voulez changer l'URL sans recharger la page oubliez le côté serveur, c'est juste la question de savoir comment votre frontend répondra aux appels API spécifiques. Lorsque vous modifiez l'URL dans votre navigateur (précisément window.location), vous lui dites en fait que du nouveau contenu arrive, qui est exécuté en récupérant le nouveau contenu de la page (avec la fonction Django render()) et en rechargeant. Si je vous comprends bien, vous voulez juste récupérer les données JSON (comme vous le faites avec) et ensuite le montrer sur la page sans recharger. Avec jQuery vous le feriez en envoyant une requête et afficher son contenu de réponse d'une manière spécifique, par exemple pour changer une teneur en élément sur votre page:

$.ajax({ 
    url: your_url 
}).done(function(data) { 
    $.('#yourelementid').val(data.message); 
});