it-swarm.asia

Angular JS POST طلب عدم إرسال بيانات JSON

أحاول إرسال كائن باسم JSON إلى خدمة الويب الخاصة بي في Flask التي تتوقع JSON في بيانات الطلب.

لقد اختبرت الخدمة يدويًا عن طريق إرسال بيانات JSON وهي تعمل بشكل جيد. ومع ذلك ، عندما أحاول إجراء http POST طلب من خلال angular تحكم ، يرسل خادم الويب لي رسالة تفيد بأنه لم يتلق JSON.

عندما أقوم بفحص رؤوس الطلبات في Chrome يبدو أن البيانات لا يتم إرسالها في JSON ولكن يتم تعيين أزواج المفتاح/القيمة العادية حتى من خلال نوع المحتوى على التطبيق/json

Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:49
Content-Type:application/json;charset=UTF-8
DNT:1
Host:localhost:5000
Origin:http://localhost:5000
Referer:http://localhost:5000/
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
application=AirFare&d1=10-APR-2013&d2=14-APR-2013

إذا رأيت السطر الأخير أدناه "طلب الحمولة الصافية" ، يمكنك مشاهدة البيانات ليست بتنسيق JSON.

هذا هو HTTP POST استدعاء في بلدي angular تحكم:

$http({
            url: '/user_to_itsr',
            method: "POST",
            data: {application:app, from:d1, to:d2},
            headers: {'Content-Type': 'application/json'}
        }).success(function (data, status, headers, config) {
                $scope.users = data.users; // assign  $scope.persons here as promise is resolved here 
            }).error(function (data, status, headers, config) {
                $scope.status = status + ' ' + headers;
            });
};  

أقوم بإرسال البيانات ككائن {} ، لكنني حاولت إرسالها بعد إجراء عملية تسلسل بواسطة JSON.stringify ، ومع ذلك ، لا شيء يبدو أنني قمت بإرسال JSON إلى الخادم.

حقا نقدر إذا كان شخص ما يمكن أن تساعد.

41
smartexpert

إذا كنت تقوم بتسلسل كائن بياناتك ، فلن يكون كائن json مناسبًا. خذ ما لديك ، وقم فقط بلف كائن البيانات في JSON.stringify().

$http({
    url: '/user_to_itsr',
    method: "POST",
    data: JSON.stringify({application:app, from:d1, to:d2}),
    headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
    $scope.users = data.users; // assign  $scope.persons here as promise is resolved here 
}).error(function (data, status, headers, config) {
    $scope.status = status + ' ' + headers;
});
49
rGil

لقد جربت مثالك وهو يعمل بشكل جيد:

var app = 'AirFare';
var d1 = new Date();
var d2 = new Date();

$http({
    url: '/api/test',
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    data: {application: app, from: d1, to: d2}
});

انتاج:

Content-Length:91
Content-Type:application/json
Host:localhost:1234
Origin:http://localhost:1234
Referer:http://localhost:1234/index.html
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
{"application":"AirFare","from":"2013-10-10T11:47:50.681Z","to":"2013-10-10T11:47:50.681Z"}

هل تستخدم أحدث إصدار من AngularJS؟

10
Herman Kan

يمكنك استخدام طريقتك بهذه الطريقة

var app = 'AirFare';
var d1 = new Date();
var d2 = new Date();

$http({
    url: '/api/apiControllerName/methodName',
    method: 'POST',
    params: {application:app, from:d1, to:d2},
    headers: { 'Content-Type': 'application/json;charset=utf-8' },
    //timeout: 1,
    //cache: false,
    //transformRequest: false,
    //transformResponse: false
}).then(function (results) {
    return results;
}).catch(function (e) {

});
2
Shohel

يمكنك استخدام FormData API https://developer.mozilla.org/en-US/docs/Web/API/FormData

var data = new FormData;
data.append('from', from);
data.append('to', to);

$http({
    url: '/path',
    method: 'POST',
    data: data,
    transformRequest: false,
    headers: { 'Content-Type': undefined }
})

هذا الحل من http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

2
monkey

محاولة استخدام رابط مطلق. إذا لم تعمل ، تحقق مما إذا كانت استجابة الخدمة تحتوي على رؤوس:

التحكم في الوصول - السماح - الأصل - التحكم في الوصول - السماح - الرؤوس

فمثلا:

"Access-Control-Allow-Origin": "*"
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"
0
irakli2692