Django-Ajaxフォームでのエラー処理

みなさんこんにちは！



Djangoは、Webアプリケーションを作成するための非常に強力で動的に開発するフレームワークであることは誰もが知っています。 ただし、Web 2.0時代の到来にもかかわらず、特にフォームの送信と検証など、 AJAXを操作するための組み込みのメカニズムはまだありません。 djangoはユーザーにjsフレームワークを課したくないだけでなく、この問題に柔軟に対応したいのかもしれませんが、ページをリロードせずにajaxを介して機能するフォームが必要になることがよくあります。

この記事では、そのようなフォームの作成とそれらの操作について説明します。



アイデアは新しいものではなく、必要な機能を実装するライブラリがいくつかあることをすぐに予約してください 。たとえば、そのうちの1つ-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)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際には、データモデルからこのフォームを継承する可能性がありますが、この例では重要ではありません。

フォーム出力

このフォームをページに表示するには、2つのオプションがあります。

• 表示付きのコンテナを作成します。フォームを呼び出すことができるすべてのページ内（または親テンプレート内）になし、JSを使用してこのコンテナからダイアログを作成します。
• 別のURLからajax経由でフォームをアップロードし、ダイアログを作成します。

最初のオプションの利点は、操作の速度（サーバーに追加の要求を行う必要がない）ですが、2番目のオプションでは、同じビューを使用してフォームへのGETおよびPOST要求を処理できます（両方の場合にPOSTが必要です）。フォームを出力するためのテンプレートファイル。コード構造をより合理化しますが、これはもちろん好みの問題です。

個人的に、ページテンプレートに何かを埋め込むのは、それが単純なyes / noダイアログである場合のみであり、フォームでは常に個別のビューを使用します 。

したがって、ここではフォームの別のビューについて説明します。コードは次のようになります。

• 表示 ：
  
  

   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>
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

フォーム処理

フォームの処理に進みます。 ここでは、フォームが正常に検証されたかどうか、またはフォームにエラーが存在するかどうかをajaxハンドラーが何らかの方法で理解する必要があることを考慮する必要があります。 私の意見では、ここでの論理的な解決策はJSONを使用することです。 サーバー応答には2つのパラメーターが含まれます。最初のパラメーターはブール値で、フォーム検証の成功または失敗を示します。 2番目のパラメーターには、さまざまなオプションがあります。

• フォームの検証に成功した場合、ログインフォームはログイン後にユーザーを必要なURLにリダイレクトする可能性が高いため、このパラメーターは空である可能性があり、そこに何があっても、確認ダイアログに表示する必要がある行である可能性があります
• フォームに再びエラーが含まれる場合、2つの表示方法があります。
  
  
  1. 最初の方法は、テンプレートを介してエラーのあるフォームを再レンダリングし、html応答全体をjson変数に入れてから、フォーム全体のコンテンツを置き換えます。
  2. 2番目の方法は、フォームのすべてのフィールドに対してエラーの配列を作成してjson変数に配置し、ループ内の各フィールドに対してエラーを出力することです。

フォーム全体を置き換えることなく、必要なものだけを表示するため、2番目のオプションがイデオロギー的に好きです。 ここでは、両方の方法を実装する方法を示します。 クライアント側のフォーム処理コードは、一般的なjQuery JSフレームワークとjQuery Form Pluginというプラグインを使用します。

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 })
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   クライアント側の処理、javascript：
   
   

    $(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. 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 })
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   クライアント側の処理、javascript：
   
   

    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' }); }); }
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

また、前述の2番目のメソッドとフォームテンプレートを使用する場合、エラーは<ul>リスト要素を使用して表示されます。別の表示では、別のテンプレートを作成するか、フォームのエラークラスをオーバーライドする必要があります。



以上です。 結果のフォームのスクリーンショットをさまざまな状態で囲みます。







コメントを聞いて、Ajaxフォームを操作する他の方法を学ぶことができてうれしいです。