AngularJs 在帖子中使用对象答案

【问题标题】：AngularJs use object in postAngularJs 在帖子中使用对象
【发布时间】：2016-03-22 21:54:04
【问题描述】：

我正在尝试将一个 json 对象传递给我的 factory.login 方法，以便我可以重新使用它。

这是我的代码：

控制器功能

var data = {email:'test','password':'test'};

vm.login = function() {
            employeeFactory.login(vm.url, vm.data)
                    .then(function(response) {
                        console.log(response);
                    }, function(data)
                    {
                        console.log(data.status);
                    });
        }

工厂

factory.login = function(url,data) {
        return $http({
            'method': 'POST',
            'url': url,
            'data': $.param(
                data
            ),
            'headers': {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        });
    }
    return factory;

但错误是：

angular.js:13294 TypeError: Cannot read property 'jquery' of undefined
    at Function.n.param (jquery-2.2.2.min.js:4)
    at Object.factory.login (employeeFactory.js:14)
    at employeeController.vm.login (employeeController.js:16)
    at fn (eval at <anonymous> (angular.js:14138), <anonymous>:4:285)
    at b (angular.js:15151)
    at e (angular.js:24674)
    at m.$eval (angular.js:16895)
    at m.$apply (angular.js:16995)
    at HTMLButtonElement.<anonymous> (angular.js:24679)
    at HTMLButtonElement.n.event.dispatch (jquery-2.2.2.min.js:3)

【问题讨论】：

似乎您在将 jquery 注入代码时遇到了问题。你在最小化你的代码吗？
好吧！！！！不要搞错了....问题是什么？
不，我没有最小化它。
也在你的html中确保jquery的脚本标签在angularjs之前
Jquery 是第一位的。这不是问题。

标签： javascript angularjs

【解决方案1】：

这应该是vm.data

vm.data = {email:'test','password':'test'};

而工厂根本不需要jQuery，只需使用下面的构造

factory.login = function(url,data) {
    return $http({
        'method': 'POST',
        'url': url,
         //don't use $.param, as you need jQuery dependency for that
         //for x-www-form-urlencoded you have to use this construction
         //email=test&password=test
        'data': 'email=' + data.email + '&password=' + data.password, 
        'headers': {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
}
return factory;

但考虑在服务器请求处理程序上使用 JSON 类型，因为它更容易

【讨论】：

【解决方案2】：

您的 JSON 似乎不正确。应该是：

var data = { "email": "test", "password": "test"};

$http.post 函数也可用：

$http.post(url, data, [{headers: { 'Content-Type' : 'application/x-www-form-urlencoded'}]);

【讨论】：

【解决方案3】：

JSON 是一种序列化对象的格式，所以它是一个字符串。您将对象作为包含要发送到服务器的数据的数据，所以只需这样做：

只要把你的数据对象放进去：

factory.login = function(url,data) {
    return $http({
        'method': 'POST',
        'url': url,
        'data': data
    });
}
return factory;

Angular 会在有效载荷中将 json 发送到服务器。您不需要自己进行序列化。

文档https://docs.angularjs.org/api/ng/service/$http -> 默认转换 ->

请求转换（$httpProvider.defaults.transformRequest 和 $http.defaults.transformRequest):

如果请求配置对象的数据属性包含对象，将其序列化为 JSON 格式。响应转换（$httpProvider.defaults.transformResponse 和 $http.defaults.transformResponse)：

如果检测到 XSRF 前缀，则去掉它（请参阅安全注意事项下面的部分）。如果检测到 JSON 响应，则使用 JSON 解析器。

堆栈跟踪显示以下错误：

TypeError: Cannot read property 'jquery' of undefined

【讨论】：

【解决方案4】：

错过匹配变量使用声明的var data = {}，但在您的控制器中使用vm.data。应该声明为

vm.data= {email:'test','password':'test'}

或

如果声明为var data= {}，则在employeeFactory.login(vm.url, data) 中使用data

并且在您的工厂中无需使用$.param 可以在 post 方法中作为参数发送，例如

$http.post(url, data, [{headers: { 'Content-Type' : 'application/x-www-form-urlencoded'}]);

Angular Documentation

【讨论】：