Develop Reference

Problems passing js data to php page using ajax jquery

Hi everyone
After one week searching what could be the problem I have not discovered what could fix it.
I already have done some jquery ajax calls before and I am currently trying to realize a Wordpress pluging.
There I am trying to pass an array in Javascript using Ajax Jquery to a Php page using POST request. Ajax request is correctly achieved ( success and done events are triggered ) but when I am accessing the page $_POST is empty.
I even tried in the code below to simply put simple string data but I can't access it in php page.
This is my Jquery code :
$('#Enregistrer').click(function(){
saveArray= new Array();
var i=0;
$('.q1').each(function(){
if ($(this).hasClass('tablesorter-filter-row')==true){
// doing nothing
}
else{
saveArray[i]=new Array();
for (var j=0; j<6; j++){
if ($(this).children().eq(j).hasClass('m1') || $(this).children().eq(j).hasClass('m2')){
var value = $(this).children().eq(j).children('select').val();
}
else{
var value = $(this).children().eq(j).html();
}
saveArray[i][j]= value;
}
i++;
}
});
console.log(saveArray);
var data = 'test';
$.ajax({
url:'../api/send_form.php',
method:'POST',
data: { 'data': data },
success: function(resp){
console.log('ok');
window.location='../api/send_form.php';
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
});
If you need more details don't hesitate, this is my first post on stackoverflow.I try to be as precise as possible.
Thanks

maybe your attempt is missing the type: 'POST', also added a few more elements
$.ajax({
dataType: 'html',
type: 'POST',
url:'../api/send_form.php',
method:'POST',
data: { data: data },
processData: false,
contentType: false,
success: function(resp){
console.log('ok');
window.location='../api/send_form.php';
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});

Ajax post call returns parsererror

I submit the reactjs form as mentioned below,
submit(){
if(this.checkRequiredField()){
$.ajax({
url: '/api/Accounts',
dataType: 'json',
type: 'POST',
data: {
Name: this.state.name,
StartDate :this.state.startDate,
EndDate : this.state.endDate,
UserCount: this.state.userCount
},
success: function(data, status, xhr) {
console.log('data added successfully');
}.bind(this),
error: function(xhr, status, err) {
console.error(status, err.toString());
}.bind(this)
})
}
The above ajax post will call the respective Web Api post method, where the data got inserted successfully to the db.
After it posts the data, the program doesn't return to the success function, instead it calls error function and logs the error
parsererror SyntaxError: JSON.parse: unexpected end of data at line 1
column 1 of the JSON data
when I checked the xhr.status, the value is 201 and statustext is Created.
Why the above ajax post call returns parsererror? how to fix this issue?

The problem is with the dataType mentioned in the ajax call.
The post method is not returning any json data,
by changing the dataType :'json' to dataType:'text' fixed the issue.
Thanks Jaromanda X and Mathew Jibin for your inputs

If you are not expecting a JSON format return, you may need to remove that instead.
submit(){
if(this.checkRequiredField()){
$.ajax({
url: '/api/Accounts',
type: 'POST',
data: {
Name: this.state.name,
StartDate :this.state.startDate,
EndDate : this.state.endDate,
UserCount: this.state.userCount
},
success: function(data, status, xhr) {
console.log('data added successfully');
}.bind(this),
error: function(xhr, status, err) {
console.error(status, err.toString());
}.bind(this)
})
}

just a suggestion,
if you want to return a json from controller you can pass a custom message from controller, like saved successfully, keeping your same ajax code
success: function(data, status, xhr) {
console.log(data.ResponseText );
}
controller:
based on condition
return Json(new { success = true,
ResponseText = "saved successfully" }, JsonRequestBehavior.AllowGet);

MVC form is dirty when it is not

I am updating a field using Ajax. Once the update is done, the field is still dirty causing the javascript alert "Are you sure you want to leave this page..you have unsaved changes" message. It's a simple ajax method:
function Save() {
var name = $("#Name").val();
$.ajax({
url: "/Controller/Method",
data: { "firstname": name },
type: 'POST',
async: false,
cache: false,
success: function (result) {
$("#messageToUser").find("label").html("Updated successfully");
},
error: function(xhr, textStatus, errorThrown) {
alert("in error");
}
});
}
From my googling, I found that I cannot block that message using the onbeforeunload, as that may have other effects on ajax functions etc.,. So what are my options?

Internal Server Error when response text from ajax POST call is big

I am using an ajax call like the following:
$(function () {
$.ajax({
type: 'POST',
url: 'frmHistoryReportFinal.aspx/GetDataTable',
data: json_data,
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function (responseText) {
if (responseText.d == "")
return;
parsedData = JSON.parse(responseText.d);
alert(parsedData);
count = 0;
},
error: function (xhr, textStatus, errorThrown) {
//process the error
alert(xhr);
alert(textStatus);
alert(errorThrown);
}
});
});
When I have a small set of data returned from my C# codebehind. The ajax call functions well. But when I have a json string with larger data, say 200 records returned then the ajax call gives error("Internal Server Error").
Please help me resolve the issue as I usually need to handle large datasets.

AJAX call returning Interal Server Error in ASP.NET MV3 project [duplicate]

This question already has answers here:
Error Handling in asp.net mvc 3
(5 answers)
Closed 9 years ago.
I'm new with and using ASP.NET, MVC3 and AJAX.
I try to call a method in my controller with an AJAX call, but I receive an Internal Server Error.
Here's my Javascript method:
function DeleteItem(id) {
var answer = confirm("Are you sure ?")
if(answer) {
$.ajax({
type: 'POST',
url: '/Item/Delete',
data: id,
dataType: 'json',
success: function (data) {
alert('Function called');
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
}
and here's my method in my Controller:
public ActionResult Delete(int idItem) {
Item.Delete(idItem); //delete my item
return RedirectToAction("Index", "Item");
}
The Javascript method is called, but when I answer "Yes, I'm sure I want to delete", I get an Internal Server Error and I am not sure why. What causes the server error?

My guess is that the reason you are getting an internal server is because the name of the int that you are passing in does not match the int that you are expecting in your controller. As a result, idItem is most likely null which is causing your internal server error when going to delete.
Change the data to match
function DeleteItem(id) {
var answer = confirm("Are you sure ?")
if (answer) {
$.ajax({
type: 'POST',
url: '/Item/Delete',
data: { idItem: id},
dataType: 'json',
success: function (data) {
alert('Function called');
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
}

Your ActionResult method does not have the [HttpPost] attribute. Your Ajax call is of type 'POST'.

Perhaps you need to serialize the id you are passing to action to JSON format. And you also need to decorate your action method with [HttpPost] attribute so that it accepts POST verbs.