jQuery.ajax returns html instead of json - javascript

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.

Related

Ajax not passing correct data to $_POST on responding php page

I've got an ajax function:
$('#addSiteButton').on('click',function() {
let addSiteOption = $('#enterNewWebsiteLink').val();
const form = new FormData();
form.append('addSiteOption', addSiteOption);
$.ajax({
url: "includes/submit_site.php",
data: { 'data': form },
method: "POST",
contentType: false,
processData: false,
enctype: false,
cache: false,
datatype: "text",
success: function (response, data) {
}
});
My PHP file looks just like this:
if (isset($_POST['data'])) {
$websitelink = $_POST['addSiteOption'];
}
my HTML looks like this:
<input type="url" form="addsite" class="enterNewWebsiteLink"
id="enterNewWebsiteLink"
name="enterwebsitelink"
placeholder="Enter A New Website">
The error that I am getting is: Warning: Undefined array key "data"
I've tried outputting the variable addSiteOption and it outputs the URL correctly.
The frustrating thing, I've been checking/copying this against a previous project I did that I got it working in, and I can't make any difference between them now.
I get a 200 response from the server for the page.
You can't serialize FormData, and processData: false tells jQuery not to try to serialize the data: option.
You should just pass the FormData as the data: option. Then the keys of the FormData will become the $_POST keys.
JS:
$('#addSiteButton').on('click',function() {
let addSiteOption = $('#enterNewWebsiteLink').val();
const form = new FormData();
form.append('addSiteOption', addSiteOption);
$.ajax({
url: "includes/submit_site.php",
data: form,
method: "POST",
contentType: false,
processData: false,
enctype: false,
cache: false,
dataType: "text",
success: function (response, data) {
}
});
PHP:
if (isset($_POST['addSiteOption'])) {
$websitelink = $_POST['addSiteOption'];
}
You also had a typo: datatype: should be dataType:

File input with a string as ajax parameter separately

I want to make an ajax call which has 2 parameters value. One file object and another string value. I need to pass 2 parameters as service will accept 2 parameters. I have written like this
$.ajax({
url: serviceParameter.url,
dataType: "JSON",
type: 'POST',
data: {fileInput: fileobject, uploadType: 'test'},
//enctype: 'multipart/form-data',
//processData: false, // Don't process the files
//contentType: false,
contentType: 'multipart/form-data',
cache: false,
success: function(response){
console.log(data);
},
error: function(e){console.log(e);}
})
It giving 404 not found exception. Please help me with some idea.

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) {
}
});

jquery and json ajax....how to parse the data

Below is my jquery ajax call. I see from fire bug that I am getting the json response.
Content-Type application/json
{x:1363590711.97,y:0.277528026651}
However...I cant event pop up and alert of the data? How do I get the parsed json object so i cna start working iwth it?
$.ajax({
type: 'GET',
url: 'ajax_test',
crossDomain: false,
dataType: 'json',
success: function(responseData) {
alert(responseData);
//seriesJsonData[0]['data'].push({y: responseData.y, x: responseData.x});
}
});
Your return data is already parsed when you request dataType: 'json'
$.ajax({
type: 'GET',
url: 'ajax_test',
crossDomain: false,
dataType: 'json',
success: function(responseData) {
alert(responseData.x + " " + responseData.y);
seriesJsonData[0]['data'].push(responseData);
}
});

Categories