Send JSON using $.Ajax() with a POST method

Question

I am trying to send a JSON object using $.ajax() in jquery with a POST method, from my pure html page ,to a datapower endpoint.the response header in fire bug gives me"internal server error",please can any one tell me what i am doing wrong here : HTTP/1.1 500 Error X-Backside-Transport: FAIL FAIL Content-Type: text/xml Connection: close

My Jquery code looks like this :

 $(document).ready(function () {
            $('#btn_submitcallback').click(function () {

                //add the values we need for the API to an object
                var objCallbackData = new Object;
                var d = new Date();
                var dat = d.getDate();
                var mon = d.getMonth() + 1;
                var year = d.getFullYear();
                var todayDate = dat + "/" + mon + "/" + year;
                alert("inside submit callback");
                //build the object
                objCallbackData.Store_Code = "POO726"; //$('#sel_title').val();
                objCallbackData.Title = $('#sel_title').val();
                objCallbackData.First_Name = $('#txt_firstname').val();
                objCallbackData.Last_Name = $('#txt_surname').val();
                objCallbackData.House_Number = $('#txt_houseno').val();
                objCallbackData.Street = $('#txt_streetname').val();
                objCallbackData.City = $('#txt_city').val();
                objCallbackData.Post_Code = $('#txt_postcode').val();
                objCallbackData.Email = $('#txt_email').val();
                objCallbackData.Phone_Number = $('#txt_phone').val();
                objCallbackData.Project_Type = "Bathroom";
                objCallbackData.Callbacktime_Morning = "Y";
                objCallbackData.Callbacktime_Afternoon = "Y";
                objCallbackData.Callbacktime_Evening = "N";
                objCallbackData.Callbacktime_Weekend = "N";
                objCallbackData.Callbacktime_Weekday = "Y";
                objCallbackData.Helparea_Measuring = "Y";
                objCallbackData.Helparea_Designing = "N";
                objCallbackData.Helparea_Usingspaces = "N";
                objCallbackData.Helparea_Services = "N";
                objCallbackData.Helparea_Productinfo = "N";
                objCallbackData.Status = "O";
                objCallbackData.Date = todayDate;

                // alert(objCallbackData.date);


                //turn the object in to a JSON string
                var myJson = JSON.stringify(objCallbackData);
                alert(myJson);


                $.ajax({
                    type: 'POST',
                    url: 'http://xb629050-s1.uk.b-and-q.com:9340/api/callback',
                    contentType: 'application/json; charset=utf-8',
                    data: myJson,
                    dataType: 'json',
                    success: function () {
                        alert("good");
                    },
                    error: function (xhr, status) {
                        switch (status) {
                            case 404:
                                alert('File not found');
                                break;
                            case 500:
                                alert('Server error');
                                break;
                            case 0:
                                alert('Request aborted');
                                break;
                            default:
                                alert('Unknown error: ' + xhr.statusText);
                        }
                    }
                });


            });
        });

try removing the `charset` from `contentType` – Furqan Hameedi Apr 20 '13 at 10:44 — Furqan Hameedi, Apr 20 '13 at 10:44
Tried removing the charset ..no joy!!:( – user2301878 Apr 20 '13 at 11:14 — user2301878, Apr 20 '13 at 11:14

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

Ajax does not support cross domain request. You need to use jsonp method for this.

Also see this

How to make cross domain ajax call using jQuery JSONP

edited May 23 '17 at 12:12

Community

1
1

answered Apr 20 '13 at 10:43

Narayan Singh

1,234
2
13
26

Tried the ajax shortcut $.post() in jquery ,the data is reaching the endpoint but not as JSON .Any idea how i can force the content-type of $.post() method ,since $.ajax() is not working ? – user2301878 Apr 20 '13 at 11:16
@user2301878 `$.post` is a convenience method of `$.ajax`. If it can't be done with `$.ajax` it can't be done with `$.post`. Not saying you can't do what you want... just saying `$.post` won't help – charlietfl Apr 20 '13 at 11:29

vladimir · Answer 2 · 2013-04-20T21:05:49.763

0

@Thrustmaster is right you cannot use POST-request for cross-domain asynchronous operation need to use GET because under the hood will load script-tag content.

Try this:

$.getJSON("http://xb629050-s1.uk.b-and-q.com:9340/api?callback=?", 
    objCallbackData, processServerResponse);

where processServerResponse is function that will be called after getting data:

function processServerResponse(data) {
// processing data from server
}

Please see for example 'free geoIP'-service. Try to browse: http://freegeoip.net/json/?callback=handleResponse

PS some excerpt from wiki:

.. a web page served from server1.example.com cannot normally connect to or communicate with a server other than server1.example.com. A few exceptions include the HTML element. Exploiting the open policy for elements, some pages use them to retrieve JavaScript code that operates on dynamically generated JSON-formatted data from other origins. This usage pattern is known as JSONP. Requests for JSONP retrieve not JSON, but arbitrary JavaScript code. They are evaluated by the JavaScript interpreter, not parsed by a JSON parser.

edited Apr 20 '13 at 21:05

answered Apr 20 '13 at 19:05

vladimir

13,428
2
44
70

Thanks for the reply @vladimir77.Using your method described above, the datapower is getting a regular form submission using an HTTP GET like this : But my datapower endpoint expects data in JSON format with a HTTP POST .Uisng your menthod the datasent over to datapower is not of JSON format – user2301878 Apr 22 '13 at 13:31
Thanks for the reply @vladimir77.Using your method described above, the datapower is getting a regular form submission using an HTTP GET But my datapower endpoint expects data in JSON format with a HTTP POST .Sorry but i am a JQuery newbie.please could you suggest somthing that could help me sending data from my Jquery UI in JSON format with HTTP POST .. – user2301878 Apr 22 '13 at 13:39
You are welcome :) @user2301878 the main concern is you sent async request to another domain, isnt it? jquery (and any another client library) is a tool that cannot break cross-domain restrictions because browsers prohibit that submission. May be you try to make cross-domain request through server (using WCF for instance or WebRequest) - you send POST-request to your server and it propagate its to datapower endpoint? – vladimir Apr 22 '13 at 14:06

Send JSON using $.Ajax() with a POST method

2 Answers2