使用 $.Ajax() 和 POST 方法发送 JSON

Question

我正在尝试使用 POST 方法在 jquery 中使用 $.ajax() 将 JSON 对象从我的纯 html 页面发送到 datapower 端点。fire bug 中的响应标头给我“内部服务器错误”，请谁能告诉我我在这里做错了什么： HTTP/1.1 500 错误 X-Backside-Transport：失败失败 内容类型：文本/xml 连接：关闭

我的 Jquery 代码如下所示：

 $(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);
                        }
                    }
                });


            });
        }); 

Answer 1

Ajax 不支持跨域请求。 您需要为此使用 jsonp 方法。

另请参阅

How to make cross domain ajax call using jQuery JSONP

Answer 2

@Thrustmaster 是对的，您不能使用 POST 请求进行跨域异步操作需要使用 GET，因为在后台会加载脚本标签内容。

试试这个：

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

其中 processServerResponse 是获取数据后调用的函数：

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

请参阅例如“免费 geoIP”服务。尝试浏览：http://freegeoip.net/json/?callback=handleResponse

PS 部分摘自维基：

.. 从 server1.example.com 提供的网页无法正常连接 到 server1.example.com 以外的服务器或与服务器通信。一些 例外情况包括 HTML 元素。利用开放 元素的策略，一些页面使用它们来检索 对动态生成的 JSON 格式进行操作的 JavaScript 代码 其他来源的数据。这种使用模式称为 JSONP。 JSONP 请求检索的不是 JSON，而是任意 JavaScript 代码。 它们由 JavaScript 解释器评估，而不是由 JSON 解析 解析器。