javascript 提交ajax django表格

Posted 2021-05-03

//Instructions

1. Add the idForm id to your form
2. Add this script at the bottom of your body. Remember to use the {% block footer_scripts %} block in your main
template if you are extending your template and add this script in this block.
3. That's all, enjoy your form submission through Ajax!

<script>

        $body = $("body");
        //AjaxStart and AjaxStop  
        $(document).ajaxStart(
            function() {
                alert("starting")
                $body.addClass("loading");

            }
        );
        $(document).ajaxStop(
            function() {
                alert("Stopping")
                $body.removeClass("loading");
            }
        );

        /*
        $(document).on({
            ajaxStart: function() { $body.addClass("loading");    },
             ajaxStop: function() { $body.removeClass("loading"); }
        }); */
        
        
        //We configure CSRF needed by the Django Validation System
        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 = jQuery.trim(cookies[i]);
                    // 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');

        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }
        $.ajaxSetup({  //Finally, setting up AJAX
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });
        
        //Django Function Useful to submit a form
        $(function() {
          alert("hello world")
          $('#idForm').submit(function(event) { //Specifying the form with id #idForm
            console.log("Hello, i'm here!")
            event.preventDefault(); // Prevent the form from submitting via the browser
            var form = $(this);  //Getting the form
            var formData = new FormData(form.get(0)); //appending the form as a FormData object

            $.ajax({  //Executing the Ajax. processData, cache, and contentType needed, i don't know why
              processData: false,
              type: form.attr('method'),
              url: form.attr('action'),
              data: formData,
              cache: false,
              contentType: false,

            }).done(function(data) {   //When finished, load some div with id trying
                alert("Très bien")
                $('#trying').html(data)
              // Optionally alert the user of success here...
            }).fail(function(data) {  //When finished, if there is a failure, do something
              // Optionally alert the user of an error here...
                alert("Fail")
            });
          });
        });
        </script>