Как отправить форму на сервер, используя ajax?

Question

Я пытаюсь отправить идентификатор кнопки на свой сервер, используя ajax для отправки формы, потому что я не хочу загружать новую страницу каждый раз, когда нажимаю на кнопку. Но это не работает, и я не знаю почему. Она даже больше не меняет кнопку thexto 'x'.

Я очень новичок в ajax btw

Вот мой сценарий:

<script> 
    var docFrag = document.createDocumentFragment();
    for (var i=0; i < 3 ; i++){ 
        var row = document.createElement("tr") 
        for (var j=0; j < 3 ; j++){ 
                 var elem = document.createElement('BUTTON');
                 elem.type = 'button';
                 elem.id = 'r'+i+'s'+j;
                 elem.value = 'r'+i+'s'+j;
                 elem.onclick = function () { 
                    document.getElementById("klik").value = this.id;
                    document.getElementById("ID").value = this.id;
                    //document.getElementById("klik").submit();

                    $("#klik").submit(function(event){
                        event.preventDefault(); //prevent default action 
                        var post_url = $(this).attr("action"); //get form action url
                        var request_method = $(this).attr("method"); //get form GET/POST method
                        var form_data = new FormData(this); //Creates new FormData object
                        $.ajax({
                            url : post_url,
                            type: request_method,
                            data : form_data,
                            contentType: false,
                            cache: false,
                            processData:false
                        }).done(function(response){ 
                            alert('Done');
                        });
                    });

                 
                    var id = this.getAttribute('id'); 
                    var novi = document.createElement('BUTTON'); 
                    novi.type = 'button'; 
                    
                    //alert("This object's ID attribute is set to \"" + id + "\".") 
                    novi.value = id; 
                    novi.innerHTML = 'x'; 
                    this.parentElement.replaceChild(novi,this); 
                    }; 
                 elem.innerHTML = elem.value; 
                 
                 docFrag.appendChild(elem); 
            } 
        document.body.appendChild(docFrag); 
        document.body.appendChild(row); 
    } 
</script>

Answer 1

Перед отправкой запроса ajax необходимо добавить заголовок X-required-With.

// you can omit  this if you use @csrf_exempt decorator in your views
data['csrfmiddlewaretoken'] = '{{ csrf_token }}';

$.ajax({
    type: "POST",
    // Django use X-requested-With header to identify Ajax
    beforeSend: function (xhr) {
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    },
    url: "{% url '<your_view_name>' %}",
    data: data,
    success: function (data) {
         console.log('success')
    }
});

В ваших представлениях вы можете определить, является ли запрос ajax, просто используя:

def your_view(request):
    if request.is_ajax() and request.POST:
        print(request.POST)
        # process the data

Посмотрите Документы для ajax