Develop Reference

How to add PHP Session variable into FormData using AJAX?

I'd like to pass a PHP session variable (called 'profileid') using FormData and AJAX. I thought this below would work, it did not. Why?
var imageData = new FormData();
imageData.append('image', $('#uploadImage')[0].files[0]);
imageData.append('profileid', <?php echo $_SESSION['profileid'];?>);
//Make ajax call here:
$.ajax({
url: '/upload-image-results-ajax.php',
type: 'POST',
processData: false, // important
contentType: false, // important
data: imageData,
//leaving out the rest as it doesn't pertain

You could add the profileid in the $.ajax URL parameter instead of adding it in FormData:
$(document).ready(function (e) {
$('#uploadImageForm').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: "/upload-image-results-ajax.php?profileid=<?= $_SESSION['profileid']; ?>",
type: "POST",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response){
console.log("success");
console.log(response);
},
error: function(response){
console.log("error");
console.log(response);
}
});
}));
$('#uploadImage').on("change", function() {
$("#uploadImageForm").submit();
});
});
Don't forget to place session_start(); at the beginning of your code.

Send byte[] in ajax

I need to send data with id,name , and file (PdfBytes) byte[] with ajax to my service.
How can i add my PDF file to var pdf and add it to my ajax.
My code
var PdfBytes;
//Tried to fill PdfBytes with get,didnt work
$.get('http://testservices.xxx/PdfService/MYTest.pdf', function(data)
{
PdfBytes=data;
});
var ConvertHtmlToPdfAndSendEmail = {
"PdfBytes":PdfBytes,
id": id,
"Name": name
};
$.ajax({
type: "POST",
data: JSON.stringify(ConvertHtmlToPdfAndSendEmail),
dataType: 'json',
url: "http://testservices.xxx/ConvertHtmlToPdfAndDownload",
contentType: 'application/json; charset=utf-8',
async: true,
cache: false,
success: function (result) {
//my code
},
error: function (req, err) {
//my code
}
})
In the server i get PdfBytes is null
function expect to get byte[] PdfBytes
Sow how i can upload my pdf from my pc to var PdfBytes ,and send it in ajax to my service.

There two way to send byte[] in Ajax
You convert byte[] to string for GET or to json for POST
=> The main thing you should convert to byte array to text
and recover the data format when call the server script
$.ajax({
type: "GET",
url: "http://testservices.xxx/ConvertHtmlToPdfAndDownload?data="+encodeURI(byte_array.join())
});
$.ajax({
type: "POST",
dataType: "json",
data: JSON.stringify(byte_array),
url: "http://testservices.xxx/ConvertHtmlToPdfAndDownload"
});
Hope it help!

I think you should use option call 'async' so do that:
var PdfBytes = $.ajax({
url: 'http://testservices.xxx/PdfService/MYTest.pdf',
type: 'GET',
async: false
});
var ConvertHtmlToPdfAndSendEmail = {
PdfBytes: PdfBytes,
id: id,
Name: name
};
$.ajax({
type: "POST",
data: JSON.stringify(ConvertHtmlToPdfAndSendEmail),
dataType: 'json',
url: "http://testservices.xxx/ConvertHtmlToPdfAndDownload",
contentType: 'application/json; charset=utf-8',
async: true,
cache: false,
success: function (result) {
//my code
},
error: function (req, err) {
//my code
}
});
Hope it help.

JQuery Ajax File Upload Content-Type always false

Here is my code:
$.ajax({
url: 'localhost/test',
type: 'POST',
cache: false,
data: formdata,
dataType: 'json',
processData: false,
contentType: false,
success: function(result, textStatus, jqXHR) {
console.log(result);
}
});
But the header request content type is not right, it returns false either.
I think it should looks like this

Not able to get result from data.responseText in IE but working in other browser

I am using the below code snippet to fetch data from a certain webAPI.
data.responseText works fine in FireFox but gives undefined in IE L
I have tried using data.responseJSON also but it doesn’t work in IE.
Please give me the solution to this.
Here is the code which I am using.
$.ajax({
type: "GET",
url: serviceUrl,
contentType: "application/json",
data: "{'slid':'" + slidname + "'}",
async: false,
crossDomain: true,
complete: function (data) {
alert("hii");
alert(data.responseText);
}
});

Which version of the IE? If IE9 or less, the issue could be your jQuery version - see http://jquery.com/browser-support/.
Otherwise, you could try if letting the browser do the formatting of the ajax request data helps:
$.ajax({
type: "GET",
url: serviceUrl,
contentType: "application/json",
data:JSON.stringify( {"slid": slidname} ),
async: false,
crossDomain: true,
complete: function (data) {
alert("hii");
alert(data.responseText);
}
});
If this also fails, you may want to try "jsonp" as dataType for the ajax call since you have a cross-domain request.
$.ajax({
type: "GET",
url: serviceUrl,
contentType: "application/json",
data: JSON.stringify( {"slid": slidname} ),
async: false,
crossDomain: true,
dataType: "jsonp",
complete: function (data) {
alert("hii");
alert(data.responseText);
}
});

JQuery ajax call on same domain not sending cookies when data is sent

I am trying to test whether we can convert our existing file upload form into a more ajax/html5 without changing much of the backend. So here is what I am doing on the test:
function sendFile() {
var data = new FormData();
var file = $('input[type=file]').get(0).files[0];
data.append("file1",file);
$.ajax({
type: 'post',
url: '/upload.jsp',
data: data,
contentType: 'multipart/form-data',
processData: false
});
}
So the file sending part is not the problem. The problem is that I am not getting any of my cookies. If I take the data: data param out then it sends the cookies just fine.
Any idea why?
Thanks.

You need to set the withCredentials $.ajax() setting:
function sendFile() {
var data = new FormData();
var file = $('input[type=file]').get(0).files[0];
data.append("file1",file);
$.ajax({
type: 'post',
url: '/upload.jsp',
data: data,
contentType: 'multipart/form-data',
processData: false,
xhrFields: {
withCredentials: true
}
});
}