POST request is not formatted AJAX Jquery

Question

POST request is not formatted AJAX Jquery

Navigation

#1 by (4 votes)

2

See:

HTML

<form id="form" enctype="multipart/form-data" action="paginax.php" method="post">
<input name="nome_arquivo" type="file"/>
<input type="hidden" value="valor_name1" name="name1"/>
<input type="hidden" value="valor_name" name="name2"/>
</form>

JAVASCRIPT

$(document).ready(function(){
$("#enviar_form").click(function(){

    $.ajax({
                method:"POST",
                data: $("#form").serialize(),
                url: "paginax.php",
                contentType:"multipart/form-data; boundary=---------------------------1922310697355",
                headers:{
"Accept":"text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
"Accept-Encoding":"gzip, deflate",
"Accept-Language":"pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3",
"Content-Length":"781659",
"Content-Type":"multipart/form-data; boundary=---------------------------1922310697355",
"User-Agent":"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:36.0) Gecko/20100101 Firefox/36.0"
                },
                success:function(){alert("foi!");},
                error: function(e){alert(e);}
                });

});
});

The question is, I set up the headers in ajax, and in the Content-type of the header I put: multipart/form-data; boundary=---------------------------1922310697355 .

My expectation was that the data to be sent would be divided by what I determined in the boundary ( -------------------------- -1922310697355 ).

However, when I query the request that is made, I see it being put like this:

name1=valor_name1&name2=valor_name

That is, in addition to not being split as I determined in boundary, the image I selected on the form (in the input [type = file]) does not seem to be sent as well.

I have 3 questions to address:

1st Why is not POST sent as I have determined in the division?

2 because the image is not sent, since I can not see it in the data sent in the POST (unless it is available visually only by the $ _FILES magic var).

3 ° if I determine in headers: of $.jquery Content-type:... , do I need to set the Content:Type: field of my%

jquery ajax

asked by anonymous 24.03.2015 / 03:12

1 answer

Open a span when the image loaded by Jquery loads Read table in Lua through C ++

score 4 · Accepted Answer

Why is not POST sent as I have determined it in the division?

Probably because jQuery serializes the object that you pass in the data attribute to a form data format (Query String).

Perhaps the serialization of jQuery is not formatting the data in the correct way so that it is readable to the one reading it.

This serialization is done internally through the $.param() method of jQuery . So when you pass the object by parameter, like this:

{x: 1, z: 2}

... It sends them in Query String format, like this:

x=1&z=2

Why the image is not sent, since I can not see it in the data sent in the POST (unless it is visually available only by the $ _FILES magic var)

In jQuery, you will only be able to send files via post using the formData object of javascript. To do this, you must remove this automatic serialization by changing the value of the data attribute to the formData object. Remember that the request must be POST:)

Example:

var formData = new FormData();

formData.append('key', 'value');

formData.append('image', $('#image').prop('files')[0])

$.ajax({ processData: false, cache: false, contentType: false, data: formData, type: 'post'})

If I determine in the headers: $ .jquery the Content-type: ..., I need configure the field / attribute Content: Type: from $ .jquery of my request again?

In this case, since you are sending a file, Content-Type must be deactivated, since FormData will also have its own headers when the request is sent. Therefore, we deactivated it as {contentType: false} .

Maybe, this answer I gave here in SOPT might help you:

upload without refresh with FormData, jquery