Django - अजाक्स रूपों में त्रुटि से निपटने

सभी को नमस्कार!

हम सभी जानते हैं कि वेब एप्लिकेशन बनाने के लिए Django एक बहुत शक्तिशाली और गतिशील रूप से विकासशील ढांचा है। हालांकि, वेब 2.0 युग के आगमन के बावजूद, यह अभी भी AJAX के साथ काम करने के लिए अंतर्निहित तंत्रों का अभाव है, विशेष रूप से, सबमिट करने और मान्य करने के रूपों में। हो सकता है कि django केवल उपयोगकर्ता पर कोई js- ढाँचा लागू नहीं करना चाहता हो और इस मामले में लचीला रहना चाहता हो, लेकिन किसी भी तरह विकास के लिए अक्सर ऐसे प्रपत्रों की आवश्यकता होती है जो पेजों को पुनः लोड किए बिना ajax के माध्यम से काम करते हैं।
ऐसे रूपों के निर्माण और उनके साथ काम करने पर इस लेख में चर्चा की जाएगी।

तुरंत एक आरक्षण करें कि विचार नया नहीं है, और कई पुस्तकालय हैं जो आवश्यक कार्यक्षमता को लागू करते हैं, उदाहरण के लिए, उनमें से एक - http://www.dajaxproject.com/ ।
उन लोगों के लिए जो स्वयं सर्वर के साथ क्लाइंट की बातचीत को नियंत्रित करना पसंद करते हैं या जो परियोजना में एक अतिरिक्त पुस्तकालय नहीं खींचना चाहते हैं और इसके बग से निपटते हैं, मैं आपको बताऊंगा कि तंत्र को लागू करने के लिए साइकिल का आविष्कार कैसे करें और समस्या को हल करने के विभिन्न तरीकों का वर्णन करें।

आकार

उदाहरण के लिए, साइट पर एक साधारण उपयोगकर्ता पंजीकरण फॉर्म लें:

class RegisterForm(forms.Form): email = forms.EmailField() password1 = forms.CharField(label=_("Password"), widget=forms.PasswordInput) password2 = forms.CharField(label=_("Password confirmation"), widget=forms.PasswordInput) 

वास्तविक जीवन में, आपको डेटा मॉडल से यह फ़ॉर्म विरासत में मिलने की संभावना है, लेकिन हमारे उदाहरण के लिए यह महत्वपूर्ण नहीं है।

फार्म का उत्पादन

इस फ़ॉर्म को पृष्ठ पर प्रदर्शित करने के लिए, हमारे पास दो विकल्प हैं:

• प्रदर्शन के साथ एक कंटेनर बनाएं : उन सभी पृष्ठों में से कोई भी नहीं जिनसे आप फ़ॉर्म को (या मूल टेम्पलेट के अंदर) कॉल कर सकते हैं, फिर इस कंटेनर से एक डायलॉग बनाने के लिए JS का उपयोग करें।
• एक अलग URL से अजाक्स के माध्यम से फ़ॉर्म अपलोड करें, और फिर एक संवाद भी बनाएं।

पहले विकल्प का लाभ इसके संचालन की गति है (सर्वर के लिए अतिरिक्त अनुरोध करने की आवश्यकता नहीं है), लेकिन दूसरे विकल्प में, आप फॉर्म में GET और POST अनुरोधों को संसाधित करने के लिए एक ही दृश्य का उपयोग कर सकते हैं (हमें दोनों मामलों में POST की आवश्यकता है), प्लस हम एक अलग बनाते हैं फ़ॉर्म को आउटपुट करने के लिए एक टेम्प्लेट फ़ाइल, जो कोड संरचना को अधिक सुव्यवस्थित बनाता है, हालांकि यह निश्चित रूप से स्वाद का मामला है।
व्यक्तिगत रूप से, मैं पृष्ठ टेम्पलेट में केवल कुछ एम्बेड करता हूं यदि यह एक साधारण हां / नहीं संवाद है, और रूपों के लिए मैं हमेशा अलग-अलग विचारों का उपयोग करता हूं।
इसलिए, हम फॉर्म के लिए एक अलग दृष्टिकोण पर यहां रहते हैं, फिर कोड इस तरह दिखाई देगा:

• देखें :
  

   def register(request): form = RegisterForm() return direct_to_template(request, "register.html", extra_context={'form': form }) 

  
  
• टेम्पलेट :
  

   {% load i18n %} <form id="register_form" method="post" action="{% url register %}"> {% csrf_token %} <ul> {{ form.as_ul }} <li><span id="register">{% trans "Register" %}</span></li> </ul> </form> 

फार्म प्रसंस्करण

हम प्रपत्र के प्रसंस्करण के लिए आगे बढ़ते हैं। यहां यह ध्यान रखना आवश्यक है कि अजाक्स-हैंडलर को किसी तरह यह समझना चाहिए कि क्या फॉर्म सफलतापूर्वक सत्यापित किया गया है या इसमें त्रुटियां मौजूद हैं। मेरी राय में, यहाँ तार्किक समाधान, JSON का उपयोग करना होगा। सर्वर प्रतिक्रिया में 2 पैरामीटर होंगे, जिनमें से पहला बूलियन है, जो फॉर्म सत्यापन की सफलता या विफलता को इंगित करेगा। दूसरे पैरामीटर के साथ, फिर से विभिन्न विकल्प हैं:

• एक सफल फ़ॉर्म सत्यापन के मामले में, यह पैरामीटर खाली हो सकता है, क्योंकि लॉगिन फ़ॉर्म लॉग-इन करने के बाद उपयोगकर्ता को आवश्यक url पर पुनर्निर्देशित करता है और इससे कोई फर्क नहीं पड़ता कि क्या है, या यह एक पंक्ति हो सकती है जिसे पुष्टि संवाद में प्रदर्शित करने की आवश्यकता है।
• मामले में जब फॉर्म में फिर से त्रुटियां होती हैं, तो प्रदर्शित करने के 2 संभावित तरीके हैं:
  
  1. पहला तरीका टेम्पलेट के माध्यम से त्रुटियों के साथ फॉर्म को फिर से प्रस्तुत करना है और संपूर्ण HTML प्रतिक्रिया को एक जेन्स चर में डालना है, जो तब पूरे फॉर्म की सामग्री को बदल देता है।
  2. दूसरा तरीका फॉर्म के सभी क्षेत्रों के लिए त्रुटियों की एक सरणी बनाना और इसे एक जसन चर में रखना है, फिर लूप में प्रत्येक क्षेत्र के लिए आउटपुट त्रुटियों।

मुझे वैचारिक रूप से दूसरा विकल्प पसंद है, क्योंकि यह केवल वही दिखाता है जो आपको चाहिए, पूरे फॉर्म को बदले बिना। यहां मैं दिखाऊंगा कि दोनों तरीकों को कैसे लागू किया जाए। क्लाइंट-साइड फॉर्म प्रोसेसिंग कोड लोकप्रिय jQuery जेएस फ्रेमवर्क और एक प्लगइन का उपयोग करता है जिसे jQuery फॉर्म प्लगिन कहा जाता है।

1. पहला तरीका:
   
   देखने का अंतिम संस्करण:
   

    def register(request): if request.method == 'POST': form = RegisterForm(request.POST) if form.is_valid(): #  # ... return HttpResponse(simplejson.dumps({'response': _("Email with a confirmation link has been sent"), 'result': 'success'})) else: t = loader.get_template('register.html') ctx = RequestContext(request, {'form': form}) response = t.render(ctx) return HttpResponse(simplejson.dumps({'response': unicode(response), 'result': 'error'})) form = RegisterForm() return direct_to_template(request, "register.html", extra_context={'form': form }) 

   
   
   ग्राहक पक्ष प्रसंस्करण, जावास्क्रिप्ट:
   

    $(document).ready(function() { $('#register').live('click', function() { $('#register_form').ajaxSubmit({ success: function(data, statusText, xhr, $form) { //     $form.find('.error').remove(); if (data['result'] == 'success') { //  -  } else if (data['result'] == 'error') { //   $form.replaceWith(data['response']); } }, dataType: 'json' }); }); } 

2. दूसरा तरीका:
   
   देखने का अंतिम संस्करण:
   

    def register(request): if request.method == 'POST': form = RegisterForm(request.POST) if form.is_valid(): #  # ... return HttpResponse(simplejson.dumps({'response': _("Email with a confirmation link has been sent"), 'result': 'success'})) else: #   response  ,  -   response = {} for k in form.errors: #       ... response[k] = form.errors[k][0] return HttpResponse(simplejson.dumps({'response': response, 'result': 'error'})) form = RegisterForm() return direct_to_template(request, "register.html", extra_context={'form': form }) 

   
   
   ग्राहक पक्ष प्रसंस्करण, जावास्क्रिप्ट:
   

    function display_form_errors(errors, $form) { for (var k in errors) { $form.find('input[name=' + k + ']').after('<div class="error">' + errors[k] + '</div>'); } } $(document).ready(function() { $('#register').live('click', function() { $('#register_form').ajaxSubmit({ success: function(data, statusText, xhr, $form) { //     $form.find('.error').remove(); if (data['result'] == 'success') { //  -  } else if (data['result'] == 'error') { //   display_form_errors(data['response'], $form); } }, dataType: 'json' }); }); } 

यह भी ध्यान देने योग्य है कि पहले वर्णित दूसरी विधि और फॉर्म टेम्पलेट का उपयोग करते समय, त्रुटियों को <ul> सूची तत्व का उपयोग करके प्रदर्शित किया जाएगा, दूसरे प्रदर्शन के लिए एक अन्य टेम्पलेट बनाना या फॉर्म के लिए त्रुटि वर्ग को ओवरराइड करना आवश्यक है।

वह सब है। मैं विभिन्न राज्यों में परिणामी फॉर्म के स्क्रीनशॉट संलग्न करता हूं:



मुझे टिप्पणियाँ सुनने और अन्य तरीकों से काम करने के तरीके सीखने में खुशी होगी।