We Keep Coding

Is there any way to send a file trough an array via AJAX?

I filled up an array with a lot of information(80+variables) and 1 file.
var ArrayEnv= {LOTS OF VARIABLES DECLARED + 1 File}
console.log(ArrayEnv); -> Just for testing purposes
$.ajax({
url: 'controller/send_data',
data: ArrayEnv,
type: 'POST',
cache: false,
contentType: false,
processData: false,
before: '',
success: function(data) {
console.log('Ajax Value: '+data);
}});
So, when I send the data to the controller without the FILE, everythin goes right, but whenever I send a file it crashes.
I dont want to use formData since im getting and validating multiple variables through branchings on the JS.
I've done a lot of research and im really losing hope...
is there any way to send a file in the same array that containts the data?
Update:
Actually had to use formData to make it work
data = new FormData($("#validatedForm")[0]);
$.ajax({
url: 'controller/send_data',
data: data,
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
console.log('Load');
},
method: 'POST',
// type: 'POST', // For jQuery < 1.9
success: function ( data ) {
console.log( data );
}
});

jQuery.ajax returns html instead of json

echo json_encode($mockImageUrl); //I do this in php
In js (just the essence):
formdata.append('variation_id', variation.id);
formdata.append('image_url', s3_url);
jQuery.ajax({
url: 'http://everframe.wordpress.dev/wordpress/wp-admin/admin-ajax.php',
type: 'POST',
data: formdata,
dataType: 'json',
processData: false,
contentType: false,
success: function(data) {
console.log(data);
}
and of course the problem is that I get an error "unexpected token.." as it tries to parse html as json. Tried to set contentType: 'application/json', but it starts returning only 0 without further necessary results.
Yet not sure how I could handle this.

JavaScript array getting encoded when posting jQuery

I'm trying to post part of my Knockout viewmodel to our server using jQuery.Ajax.
When I build the data object it looks fine in the console, but when it gets sent via the jQuery Ajax Post the array within gets encoded. The results on the other end are readable by the server, so it works, but it disturbs me greatly (the payload is bigger for one thing).
Here's the code:
var items = $.map(self.Items(), function (item) {
return item.Key() ? {
Key: item.Key(),
PromoCode: item.PromoCode,
Qty: parseInt(item.Qty(), 10)
} : undefined;
}),
data = {
"InEditMode": true,
"Items": items
};
$.ajax({
url: '/api/order/',
type: 'POST',
data: data,
dataType: "json",
success: function (order) {
<snip>
The result as seen by FireBug is this.
Here's the decoded JSON Object
InEditMode true
Items[0][Key] 2730M0ARAX1111AAAAX0
Items[0][PromoCode]
Items[0][Qty] 3
Items[1][Key] 2730M0ARCX1111AAAAX0
Items[1][PromoCode]
Items[1][Qty] 5
Here's the Raw view
InEditMode=true&
Items%5B0%5D%5BKey%5D=2730M0ARAX1111AAAAX0&
Items%5B0%5D%5BPromoCode%5D=&
Items%5B0%5D%5BQty%5D=3&
Items%5B1%5D%5BKey%5D=2730M0ARCX1111AAAAX0&
Items%5B1%5D%5BPromoCode%5D=&
Items%5B1%5D%5BQty%5D=5

Like #codenoire said in his comment, you aren't specifying the content type. Add contentType: 'application/json; charset=utf-8' to your $.ajax call, like so:
$.ajax({
url: '/api/order/',
type: 'POST',
data: data,
dataType: "json",
contentType: 'application/json; charset=utf-8',
success: function (order) {
<snip>

I think you need to stringify your JSON object before you post it. Use JSON.stringify(data) before you post it.

I was so close! The answer is a combination of rwisch45 and Saeedses
I had already tried adding the contentType before, but that caused it to break and I hadn't pursued it any further then that.
the solution is to add the content type AND JSON.stringify it, as so.
$.ajax({
url: '/api/order/',
type: 'POST',
data: JSON.stringify(data),
dataType: "json",
contentType: 'application/json; charset=utf-8',
success: function (order) {
Thanks all for your help!

I get null when I pass JSON array with JQuery AJAX

I am facing a problem with the JQuery ajax function.
I am trying to send a simple json through the ajax asshown below.
$.ajax({
url: 'NewFile.jsp',
type: 'GET',
data: {"datasource":"hello1", definition:[{val1:"hello3"}]},
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(msg) {
alert("Successfully posted "+JSON.stringify(json));
}
});
The problem is that when I do
System.out.println(request.getParameter("datasource"));
System.out.println(request.getParameter("definition"));
in my NewFile.jsp then I get hello1 for the first and null for the second.
Why I get null value in the second println()?
Thanks

In the url variable inside your ajax object, give the full URL of your request. Like so:
$.ajax({
url: 'www.google.com/',
type: 'GET',
data: {"datasource":"hello1", definition:[{val1:"hello3"}]},
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(msg) {
alert("Successfully posted "+JSON.stringify(json));
}
});
Also, always make sure that there is a failure variable inside your object literal, so that you know it happened, but failed. Helps with debugging.

Array Initialiser Too Large In ajax Response

I made ajax request for getting byte of data from server using jquery.but when I get response from server at that time I get following error.
array initialiser too large
So is there any way to find out solution.
I have following code.
$.ajax({
type: 'POST',
url: 'test',
contentType: 'application/jsonp',
crossdomain: true,
dataType: "text",
dataType: "jsonp",
success: function (txt) {
}
});