Form sending data vs. Ajax data submission

Aug. 7, 2020

Front-End

1) The default content type of a form is:

enctype = "application/x-www-form-urlencoded"

This data encoding will ignore eventually input type='file' values.

<form action="/reply_form/" method="post" enctype="application/x-www-form-urlencoded">
 {% csrf_token %}
  First name:
  <input type="text" name="firstname"><br>
  Last name:
  <input type="text" name="lastname"><br>
  <input type="file" name="file"><br>
  <input type="submit" value="Submit1">
</form>

2) Uploading files needs:
enctype = "multipart/form-data"

<form action="/reply_form/" method="post" enctype="multipart/form-data">
  "{% csrf_token %}"
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname"><br>
  <input type="file" name="file"><br>
  <input type="submit" value="Submit2"><br>
</form>

1) Sending data without files with ajax needs setting 'Content-Type' of the request to 'application/x-www-form-urlencoded'
2) Sending files with ajax also needs encoding data (enctype) "multipart/form-data"

<input id="firstname" type="text" name="firstname"><br>
Last name:<br>
<input id="lastname" type="text" name="lastname"><br>
<input id="file" type="file" name="file" multiple><br>
<button id="submit3" type="button">Submit3</button><br>
<button id="submit4" type="button">Submit4</button>

<script>

function getXHR(){
    var xhr = false;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else { //code for IE6, IE5
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

xhr = getXHR();
if(!xhr) document.getElementById("info").innerHTML = "Ajax is not supported by your browser!";

xhr.onreadystatechange = function () {
    if (xhr.readyState < 4){
        document.getElementById("info").innerHTML = "Sending data ...";
    }
    else if (xhr.readyState === 4) {
        document.getElementById("info").innerHTML = "Done.";
        if (xhr.status == 200 && xhr.status < 300){
            document.getElementById("info").innerHTML = xhr.responseText;
        }
        else{
            document.getElementById("info").innerHTML = "Error " + xhr.status;
        }
    }
}
xhr.onerror = function() {
    document.getElementById("info").innerHTML = "Error: No response from server.";
}

var url = "/reply3/";

var submit3 = document.getElementById("submit3");
submit3.onclick = function(){
    var params = "firstname=" + document.getElementById("firstname").value + "&lastname=" + document.getElementById("lastname").value;
    xhr.open('POST', url);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    var csrf_token = document.getElementsByName("csrfmiddlewaretoken")[0].value;
    xhr.setRequestHeader("X-CSRFToken", csrf_token );
    xhr.send(params);
}

var submit4 = document.getElementById("submit4");
submit4.onclick = function(){
    var fd = new FormData();
    var f = document.getElementById("file").files[0];
    if(f!=undefined)
        fd.append("file", f);
    fd.append("firstname",firstname.value);
    fd.append("lastname",lastname.value);
    xhr.open('POST', url);
    var csrf_token = document.getElementsByName("csrfmiddlewaretoken")[0].value;
    xhr.setRequestHeader("X-CSRFToken", csrf_token );
    xhr.send(fd);
}

</script>

First name:

Last name:

Server

import json

def reply3(request):

    data = {}

    form = False
    if(request.method == "POST"):
        if('form' in request.POST):
            form = True
        firstname = request.POST['firstname']
        lastname = request.POST['lastname']

        if request.FILES:
            file = request.FILES['file']
            data['fileName'] = file.name
            data['fileSize'] = str(file.size) + " bytes"


    data['firstname'] = firstname
    data['lastname'] = lastname

    jsonData = json.dumps(data)

    return jsonData

Form sending data vs. Ajax data submission

Tags