title: 400 (Bad Request) from Django Ajax POST Request
body: <p>I have read countless SO threads regarding this issue, but I cannot get my form to submit without producing a 400 (Bad Request) console error.</p>
  
  <p>I've tried everything at this point; too many options to list.  I'm hopeful someone can point me in the right direction.  Below are my code pieces - I've included all the relevant pieces. Thank you.</p>
  
  <p>Django==1.10.3
  jQuery==2.2.4</p>
  
  <p>tag.py</p>
  
  <pre><code>@register.inclusion_tag('tags/_plaque-order-form.html', takes_context=True)
  def plaque_order_form(context):
      title = 'Plaque Order Form'
      form = PlaqueOrderForm()
      context = {
          'form': form,
          'title': title,
      }
      return context
  </code></pre>
  
  <p>Order Form</p>
  
  <pre><code>&lt;form action="{% url 'contribute:plaque_order_form' %}" method="POST" id="plaqueOrderForm"&gt;
    {% csrf_token %}
    {% for field in form %}
      {{ field }}
    {% endfor %}
    &lt;button class="btn btn-black no-margin-bottom btn-small" type="submit" id="plaqueOrderFormBTN"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Url</p>
  
  <pre><code>urlpatterns = [
      url(r'^$', index, name='home'),
      url(r'^plaque_order_form/$', plaque_order_form, name='plaque_order_form')
  ]
  </code></pre>
  
  <p>Insert form in template as a tag inclusion</p>
  
  <pre><code>{% plaque_order_form %}
  </code></pre>
  
  <p>view</p>
  
  <pre><code>def plaque_order_form(request):
      if request.method == "POST":
          form = PlaqueOrderForm(request.POST)
          if form.is_valid():
              first_name = form.cleaned_data['first_name']
              last_name = form.cleaned_data['last_name']
              subject = 'New Plaque Order'
              from_email = settings.DEFAULT_FROM_EMAIL
              recipient_list = [from_email, 'chris@somewhere.net']
              ctx = {
                  'subject': subject,
                  'first_name': first_name,
                  'last_name': last_name
              }
  
              message = get_template('email_forms/plaque_order_form_email.html').render(Context(ctx))
              msg = EmailMessage(subject, message, from_email=from_email, to=recipient_list)
              msg.content_subtype = 'html'
              msg.send()
  
              messages.success(request, "Thank you for your order; someone will be in touch with you shortly")
  
          if form.errors:
              json_data = json.dumps(form.errors)
              return HttpResponseBadRequest(json_data, content_type='application/json')
      else:
          raise Http404
  
      return HttpResponse(plaque_order_form, mimetype='application/json')
  </code></pre>
  
  <p>ajax</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var csrftoken = $.cookie('csrftoken');
  
          function csrfSafeMethod(method) {
              // these HTTP methods do not require CSRF protection
              return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
          }
  
          $.ajaxSetup({
              beforeSend: function (xhr, settings) {
                  if (!csrfSafeMethod(settings.type) &amp;&amp; !this.crossDomain) {
                      xhr.setRequestHeader("X-CSRFToken", csrftoken);
                  }
              }
          });
  
          $('#plaqueOrderFormBTN').click(function (e) {
              e.preventDefault();
              var mForm = $('plaqueOrderForm').serialize();
              console.log(mForm);
              $.ajax({
                  type: 'POST',
                  url: '{% url 'contribute:plaque_order_form' %}',
                  dataType: "json",
                  contentType: "application/json; charset=utf-8",
                  data: JSON.stringify(mForm),
                  success: function (e) {
                      alert(e)
                  },
                  error: function (e) {
                      console.log(e);
                  }
              });
              return false;
          })
      })
  &lt;/script&gt;
  </code></pre>