[Django] ajax를 통한 form 데이터 submit

html 코드)

<!-- html -->
<form id="adm_algo" method="post" onsubmit="return false;" enctype="multipart/form-data">
        {% csrf_token %}
        
        <input type="file" name="img_file" id="img_file"/>
        
        <input type="text" name="al_name" id="al_name"/>
        
        <select name="al_type" id="al_type" >
            <option>Select Type</option>
            <option value="100">Classification</option>
            <option value="101">Regression</option>
            <option value="102">Clustering</option>
        </select>
</form>

 

설명)

form 태그에 id를 주고,

var form = $("#adm_algo")[0];
var form_data = new FormData(form);

위와 같이 FormData를 생성한 다음 append를 통해 input 값들을 넣어준다.

ajax의 data로 FormData를 넘겨주면 끝!

 

자바스크립트 코드)

function insert_algorithm() {
   
    var form = $("#adm_algo")[0];
    var form_data = new FormData(form);

    img_file = $("#img_file").val()
    al_name = $("#al_name").val()
    al_type = $("#al_type").val()
   
    if (al_name == "") {
        $('#al_name').focus();
        return false;
    } else if (al_type == "Select Type") {
        $('#al_type').focus();
        return false;
    } 

    form_data.append("img_file", $("#img_file")[0].files[0]);
    form_data.append("al_name", al_name);
    form_data.append("al_type", al_type);
    
    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: 'do_ins_algo',
        data: form_data,
        processData: false,
        contentType: false,

        success: function (data) {
            console.log("success")
        }, 
        beforeSend: function () {
            console.log("beforesend")
        },
        complete: function () {
            console.log("complete")
        },
        error: function (e) {
            console.log("error", e);
        }
    });
}