CODEWITHSUNDEEP
javascriptajaxhtmlform-data
EdG
EdG

Reputation: 2351

Ajax PUT request failing

I am making an ajax PUT request and including all the required fields for the request. I am still getting 400 error.

This is my formdata 

var formData = new FormData()
        var politician_id = this.props.image_reducer.politicianList[this.props.image_reducer.selectedPoliticianRow].person.id

        console.log("id is "+ politician_id)
        var politician =  {
            "description": document.getElementById('description-input').value,
            "political_party": document.getElementById('party-input').value,
            "constituency": document.getElementById('constituency-input').value,
            "positions": document.getElementById('positions-input').value,
        }
        formData.append("name", document.getElementById('name-input').value)
        formData.append("dob", document.getElementById('birth-input').value)
        formData.append("born_location",document.getElementById("birth-location-input").value)
        formData.append("current_location",document.getElementById('current-location-input').value)
        formData.append("description", document.getElementById('description-input').value)
        formData.append("father_name", document.getElementById('father-input').value)
        formData.append("mother_name", document.getElementById('mother-input').value)
        formData.append("partner_name", document.getElementById('name-input').value)
        formData.append("religion", document.getElementById('religion-input').value)
        formData.append("caste", document.getElementById('caste-input').value)
        formData.append("occupation", "politician")
        formData.append("education", document.getElementById('occupation-input').value)
        formData.append("politician", JSON.stringify(politician))

This is how I am making request

var settings = {
            "async": true,
            "crossDomain": true,
            "url": url,
            "type": "PUT",
            processData: false,
            contentType: false,
            "credentials": 'include',
            "headers": {
                Authorization: "Token " + token
            },
            "data": data,
            success:( response, textStatus, jQxhr )=> {
                console.log("info updated")

            }
        }
        $.ajax(settings).done((response) => {
            console.log("info updated success")
        });

This is the error I am getting

enter image description here enter image description here

It is perfectly ok from my backend side if I leave "actor" field. Please don't consider that to be a possible answer. I tried including "actor" also but still got same error.

What am I doing wrong? Am I making formdata in wrong manner?

Update

The JSON I am sending is (This is from console where I printed formdata)

enter image description here

Upvotes: 0

Views: 78

Answers (2)

joshua miller
joshua miller

Reputation: 1756

Try sending your data as JSON:

var settings = {
            "async": true,
            "crossDomain": true,
            "url": url,
            "type": "PUT",
            processData: false,
            "credentials": 'include',
            "headers": {
                Authorization: "Token " + token
            },
            "data": data,
            "contentType":"application/json; charset=utf-8",
            success:( response, textStatus, jQxhr )=> {
                console.log("info updated")

            }
        }
        $.ajax(settings).done((response) => {
            console.log("info updated success")
        });

Upvotes: 0

GSSwain
GSSwain

Reputation: 6133

Looks like the data is either not passed or not converted properly on the server side and hence the validation failure. In the request headers I can notice it is sending multipart/form-data.

Do update the consumes of your RequestMapping to allow multipart/form-data i.e. consumes = { "multipart/form-data" }

Upvotes: 1

Related Questions