将值从 JavaScript 传递到 Django

Question

I have three forms like this:

<form  id = "myForm" style="list-style-type: none;display: none;" class="form_class">
                {% csrf_token  %}
                    item1:
                    <input type="text" name="item1" style="width:10%;height:5%"> 
                    <br>
                    item2:
                    <input type="text" name="item2" style="width:10%;height: 5%">
                    <br>
                    item2:
                    <input type="text" name="item2" style="width:10%;height: 5%">
                    <br>
                    item2:
                    <input type="text" name="item2" style="width:10%;height: 5%">
                    <br>
                    item2:
                    <input type="text" name="item2" style="width:10%;height: 5%"> 
                    
                    <br><br> 
                    <input id="close_form" type="reset" value="reset">
                </form>      

Below is the code I used to click the button so it will go the javascript method:

 <form method="post">
   {% csrf_token %}
   <input class="bg-yellow text-white" value="RUN" name="runModel" type="submit" 
   onclick="sendValuesToBack()">
 </form>
                

In the JavaScript method, I'm getting all three form's values. I want to send those to the Django Framework to perform several operations. How do I send this data from JavaScript to Django?

Answer 1

You can do this using JQuery Ajax in the template and by creating an "API view" in your views.py that is basically just a regular view that returns a JSONResponse after checking to verify the request is Ajax. As an example of the "API" option, using JQuery:

In your urls.py:

...
path('/api/post_form/', post_form_api, name="post_form_api"),
...

For the POST method in your views.py:

        from django.http import JsonResponse

        def post_form_api(request):
              data = {}
              if request.method == "POST":
                  form = MyDjangoForm(request.POST)
                  # do something with the form data
                  ...
                  if successful:
                     data['result'] = True
                     data['message'] = "Form data saved"
              if request.is_ajax():
                 return JsonResponse(data)
              else:
                 return HttpResponseBadRequest()

In your template:

<script type="text/javascript">
        $("#myFormSubmitButton").click(function(){
                var form_data = $("#formID").serialize();
                $.ajax({ url: '{% url 'post_form_api' %}',
                                    type: "POST",
                                    dataType: "json",
                                    data: form_data,
                                    cache: false
                           }).done(function(data) {
                                if (data.result === true){
                                    alert(data.message);
                               }
                           });
                      });
                  });
            </script>

Alternatively, you can get the fields from all your forms individually, then send them in the Ajax data like so:

<script type="text/javascript">
        $("#myFormSubmitButton").click(function(){
            var csrfToken = $("input[name='csrfmiddlewaretoken']");
            var item_1 = $("#item1").val();
            var item_2 = $("#item2").val();
            ...
                $.ajax({ url: '{% url 'post_form_api' %}',
                                    type: "POST",
                                    dataType: "json",
                                    data: {'item1': item_1, 'item2': item_2, 'csrfmiddlewaretoken':csrfToken.val()},
                                    cache: false
                           }).done(function(data) {
                                if (data.result === true){
                                    alert(data.message);
                               }
                           });
                      });
                  });
            </script>

If you have multiple forms you want to use this API for and are only submitting them one at a time, you can put a hidden field in your forms and do something like this in your views.py:

     def post_form_api(request):
          data = {}
          if request.method == "POST":
              form_name = request.POST.get('form_name', None) #the name of the hidden field identifying the form
              if form_name is not None:
                  if form_name == "MyDjangoForm":
                      form = MyDjangoForm(request.POST)
                      # do something with the form data
                      ...
                  elif form_name == "MyOtherForm":
                      form = MyOtherForm(request.POST)
                      # do something with the form data
                      ...

              if successful:
                 data['result'] = True
                 data['message'] = "Form data saved"

          if request.is_ajax():
             return JsonResponse(data)
          else:
             return HttpResponseBadRequest()

If you are getting the data from all three forms in your template at once, you can do something like this in your views.py after sending all of the data using JQuery Ajax as above:

     def post_form_api(request):
          data = {}
          if request.method == "POST":
              item_1 = request.POST.get('item_1', None)
              item_2 = request.POST.get('item_2', None)
              item_3 = request.POST.get('item_3', None)
              ...
              # do something with the collected form data here
              ...

              if successful:
                 data['result'] = True
                 data['message'] = "Form data saved"

          if request.is_ajax():
             return JsonResponse(data)
          else:
             return HttpResponseBadRequest()

When you are sending data via POST don't forget to pass along your CSRF token as in the example above (it should be in the serialized form data). This assumes you have a form on the page you can get it from, otherwise you can use something like this to get it:

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

If you don't want to deal with the CSRF token, you can mark the view with the @csrf_exempt decorator and remove the ' csrfmiddlewaretoken ' data element from the Ajax call in the template, but it may not be ideal or the most secure. An example of that:

    from django.views.decorators.csrf import csrf_exempt
    from django.http import JsonResponse

    @csrf_exempt()
    def post_form_api(request):
           ...

Now, without knowing more, this is basically just pseudocode (plus I just wrote this off the top of my head so it may have errors). This also depends on what type of views you are using, and whether you want to use the Django REST framework or not (the examples above are for regular, not class-based, views and do not require the Django REST framework to work).

If you post more details I can update my answer, but I think this should get you started.