How to pass parameters in $ajax POST?
JqueryAjaxJquery Problem Overview
I have followed the tutorial as stated in this link. In the code below for some reason the data is not appended to the url as parameters, but if I set them directly to the url using /?field1="hello" it works.
$.ajax({
url: 'superman',
type: 'POST',
data: { field1: "hello", field2 : "hello2"} ,
contentType: 'application/json; charset=utf-8',
success: function (response) {
alert(response.status);
},
error: function () {
alert("error");
}
});
Jquery Solutions
Solution 1 - Jquery
I would recommend you to make use of the $.post or $.get syntax of jQuery for simple cases:
$.post('superman', { field1: "hello", field2 : "hello2"},
function(returnedData){
console.log(returnedData);
});
If you need to catch the fail cases, just do this:
$.post('superman', { field1: "hello", field2 : "hello2"},
function(returnedData){
console.log(returnedData);
}).fail(function(){
console.log("error");
});
Additionally, if you always send a JSON string, you can use $.getJSON or $.post with one more parameter at the very end.
$.post('superman', { field1: "hello", field2 : "hello2"},
function(returnedData){
console.log(returnedData);
}, 'json');
Solution 2 - Jquery
Jquery.ajax does not encode POST data for you automatically the way that it does for GET data. Jquery expects your data to be pre-formated to append to the request body to be sent directly across the wire.
A solution is to use the jQuery.param function to build a query string that most scripts that process POST requests expect.
$.ajax({
url: 'superman',
type: 'POST',
data: jQuery.param({ field1: "hello", field2 : "hello2"}) ,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: function (response) {
alert(response.status);
},
error: function () {
alert("error");
}
});
In this case the param method formats the data to:
field1=hello&field2=hello2
The Jquery.ajax documentation says that there is a flag called processData that controls whether this encoding is done automatically or not. The documentation says that it defaults to true, but that is not the behavior I observe when POST is used.
Solution 3 - Jquery
Try using GET method,
var request = $.ajax({
url: 'url',
type: 'GET',
data: { field1: "hello", field2 : "hello2"} ,
contentType: 'application/json; charset=utf-8'
});
request.done(function(data) {
// your success code here
});
request.fail(function(jqXHR, textStatus) {
// your failure code here
});
You cannot see parameters in URL with POST method.
Edit: > Deprecation Notice: The jqXHR.success(), jqXHR.error(), and > jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use > jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
Solution 4 - Jquery
function FillData() {
var param = $("#<%= TextBox1.ClientID %>").val();
$("#tbDetails").append("<img src='Images/loading.gif'/>");
$.ajax({
type: "POST",/*method type*/
contentType: "application/json; charset=utf-8",
url: "Default.aspx/BindDatatable",/*Target function that will be return result*/
data: '{"data":"' + param + '"}',/*parameter pass data is parameter name param is value */
dataType: "json",
success: function(data) {
alert("Success");
}
},
error: function(result) {
alert("Error");
}
});
}
Solution 5 - Jquery
In a POST request, the parameters are sent in the body of the request, that's why you don't see them in the URL.
If you want to see them, change
type: 'POST',
to
type: 'GET',
Note that browsers have development tools which lets you see the complete requests that your code issues. In Chrome, it's in the "Network" panel.
Solution 6 - Jquery
$.ajax(
{
type: 'post',
url: 'superman',
data: {
"field1": "hello",
"field2": "hello1"
},
success: function (response) {
alert("Success !!");
},
error: function () {
alert("Error !!");
}
}
);
type: 'POST', will append parameters to the body of the request which is not seen in the URL while type: 'GET', appends parameters to the URL which is visible.
Most of the popular web browsers contain network panels which displays the complete request.
In network panel select XHR to see requests.
This can also be done via this.
$.post('superman',
{
'field1': 'hello',
'field2': 'hello1'
},
function (response) {
alert("Success !");
}
);
Solution 7 - Jquery
You can do it using $.ajax or $.post
Using $.ajax :
$.ajax({
type: 'post',
url: 'superman',
data: {
'field1': 'hello',
'field2': 'hello1'
},
success: function (response) {
alert(response.status);
},
error: function () {
alert("error");
}
});
Using $.post :
$.post('superman',
{
'field1': 'hello',
'field2': 'hello1'
},
function (response, status) {
alert(response.status);
}
);
Solution 8 - Jquery
Your code was right except you are not passing the JSON keys as strings.
It should have double or single quotes around it
> { "field1": "hello", "field2" : "hello2"}
$.ajax(
{
type: 'post',
url: 'superman',
data: {
"field1": "hello", // Quotes were missing
"field2": "hello1" // Here also
},
success: function (response) {
alert(response);
},
error: function () {
alert("error");
}
}
);
Solution 9 - Jquery
function funcion(y) {
$.ajax({
type: 'POST',
url: '/ruta',
data: {"x": y},
contentType: "application/x-www-form-urlencoded;charset=utf8",
});
}
Solution 10 - Jquery
I know this answer is super late
You can also use FormData for passing your data into $.ajax({})
let formData = new FormData()
formData.append('data1', "Hello")
formData.append('data2', "World")
$.ajax({
url: '/',
type: 'POST',
data: formData,
contentType: false,
processData: false,
cache: false,
success: function(v){
console.log(v)
}
})
Solution 11 - Jquery
For send parameters in url in POST method You can simply append it to url like this:
$.ajax({
type: 'POST',
url: 'superman?' + jQuery.param({ f1: "hello1", f2 : "hello2"}),
// ...
});
Solution 12 - Jquery
The Problem is the way Parameters Passing So used jQuery.param then it worked
This Code Worked for Me
data: jQuery.param({ DistrictId: 5, TalukId: 0, HobliId: 0 }),
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',