title: Is there an idiomatic approach in Django for writing unobtrusive JavaScript and/or making AJAX form submissions?
body: <p>I'm a Ruby/Rails developer now working at a Python/Django shop. I've started to warm up to Python, however, I'm still struggling to find Django comparable to Rails in certain aspects I find important. A lot of my current and future work will focus on making AJAX requests to our API. As a Rails developer, I'd have used unobtrusive javascript and in particular on form submissions added a data-remote tag, as shown below.</p>
  
  <p>I'd then write a method in the controller to handle the request and would have written a JavaScript/jQuery function using event delegation in a JS file located in the /assets/js directory to handle the response on the client-side. I assumed coming over to Django there would be a similar way of implementing this sort of functionality.</p>
  
  <p>What I guess I'm really trying to say is I assumed Django would offer similar "magic" to Rails in terms of not having to write out jQuery AJAX functions every time I wanted to make an AJAX request. I wrote a rough comparison (very rough) of how I'd write both of these out. I'm looking to learn if this is an incorrect approach to what I would do in Rails in Django. I know StackOverflow isn't meant for opinions, but I think breaking principles that apply no matter what language/framework you're using, i.e. DRYing up code by not writing out AJAX functions over and over, isn't really going against an opinion, its more like breaking an accepted rule.</p>
  
  <p>My current approach to working with AJAX requests in Django feels wrong, or maybe I'm just used to the "magic" Rails offers via the data-remote="true" attribute. Would love some guidance on the topic to help me determine a solid approach, thanks. </p>
  
  <p><em><strong>RAILS</em></strong></p>
  
  <p><strong>views/some_controller/form.html.erb</strong></p>
  
  <pre><code>&lt;form action="&lt;%= endpoint %&gt;" method="post" data-remote="true" id="form"&gt;
    FORM FIELDS HERE
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>assets/javascripts/some_model.js</strong></p>
  
  <pre><code>$('body').on('ajax:success', '#form', function(event, data) {
    DO SOME STUFF HERE
  });
  </code></pre>
  
  <p><strong>controllers/some_controller.rb</strong></p>
  
  <pre><code>def some_ajax_action
    if request.xhr?
      THIS IS AN AJAX REQUEST RENDER A VIEW PARTIAL &amp; 
      MANIPULATE THE DOM WITH JS OR RESPOND WITH JSON
    else
      THIS ISNT AN AJAX REQUEST
    end
  end
  </code></pre>
  
  <p><em><strong>DJANGO</em></strong></p>
  
  <p><strong>some_app/templates/form.html</strong></p>
  
  <pre><code>&lt;form action="{% url 'app:view' %}" method="post" id="form"&gt;
     FORM FIELDS HERE OR {{ BUILD_FORM_FROM_CONTEXT }} 
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>some_app/static/assets/js/some_app.js</strong></p>
  
  <pre><code>$("#form").on("submit", function(event) {
    $.ajax({
      type: "POST",
      beforeSend: function (request) {
        request.setRequestHeader("X-CSRFToken", csrftoken);
      },
      data: data,
      url: "endpoint",
      dataType: 'json',
      contentType: 'application/json',
      }).done(function(data) {
        cb(null, data)
      }).fail(function(data) {
        cb(data)
      }).always(function(data) {
        cb(data)
      })
    });
  });
  </code></pre>