Posting data via JQuery Ajax

Question

I am facing issue in Posting data using JQuery. It works fine when I do it through Chrome Extension Postman.

My Code

var request = $.ajax({
    url:                'http://pankajserver.in/api/SaveRoleApi',
    type:               "POST",
    data:               {Role : "wsed"},
    async:              true,
    contentType:        "application/json; charset=utf-8",
    "X-Requested-With":   "XMLHttpRequest"
});

request.done(function(msg) {
    debugger;
});

request.fail(function(jqXHR, textStatus) {
    debugger;
});

Url: http://pankajserver.in/api/SaveRoleApi
contentType: "application/json; charset=utf-8"
X-Requested-With: "XMLHttpRequest"

Works fine when posted data with Postman Chrome Extension. Screenshot below

Please the error you see in your console, or the result when you call it using ajax. — Rohit Khatri
– Rohit Khatri, Commented Sep 1, 2016 at 3:53
When you use an object as the data: option, it sends the parameters using Content-type: application/x-www-form-urlencoded. It can't send JSON automatically, if you need to do that you need to call JSON.stringify(). — Barmar
– Barmar, Commented Sep 1, 2016 at 4:17

Rakesh Sojitra · Accepted Answer · 2016-09-01 15:28:07Z

1

Please try this

$.ajax({
    "async": true,
    "crossDomain": true,
    "url": "http://pankajserver.in/api/SaveRoleApi",
    "method": "POST",
    "headers": {
        "content-type": "application/x-www-form-urlencoded",
        "x-requested-with": "XMLHttpRequest",
    },
    "data": {
        "Role": "wsed"
    },
    success: function (msg) {
        debugger;
    },
    error: function (jqXHR, textStatus) {
        debugger;
    }
});

I see error in console Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://pankajserver.in/api/SaveRoleApi. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

for that please allow cross origin by placig this code in your root .htaccess

<IfModule mod_headers.c>
   Header set Access-Control-Allow-Origin "*"
</IfModule>

for more info to allow cros origin please refer this link

edited Sep 1, 2016 at 15:28

answered Sep 1, 2016 at 7:07

Rakesh Sojitra

3,6682 gold badges19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pankaj Over a year ago

I got the error: here is the screenshot: i.sstatic.net/zCS1T.png

Rakesh Sojitra Over a year ago

Are you trying this code on same domain or please allow cross origin on server and try again

Ish · Accepted Answer · 2016-09-01 04:00:10Z

0

write this headers: {'X-Requested-With': 'XMLHttpRequest'} instead of "X-Requested-With": "XMLHttpRequest" and dataType: "json" instead of contentType: "application/json; charset=utf-8",

var request = $.ajax({
 url:                'http://pankajserver.in/api/SaveRoleApi',
 type:               "POST",
 data:               {Role : "wsed"},
 async:              true,
 dataType: "json",
 contentType:        "application/json; charset=utf-8",
 headers: {'X-Requested-With': 'XMLHttpRequest'}
});

request.done(function(msg) {
 debugger;
});

request.fail(function(jqXHR, textStatus) {
 debugger;
});

edited Sep 1, 2016 at 4:00

answered Sep 1, 2016 at 3:54

Ish

2,1013 gold badges23 silver badges40 bronze badges

2 Comments

Pankaj Over a year ago

Could you please type the correct jquery code in your post? Thank you very much for the answer.

Pankaj Over a year ago

I got the error: here is the screenshot: i.stack.imgur.com/zCS1T.png

Collectives™ on Stack Overflow

Posting data via JQuery Ajax

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related