javascript - 如何在没有jQuery的情况下使用$ http发布urlencode表单数据？(How do I POST urlencoded form data with $http without jQuery?)

Question

I am new to AngularJS, and for a start, I thought to develop a new application using only AngularJS.

(我是AngularJS的新手，一开始，我想只使用AngularJS开发一个新的应用程序。)

I am trying to make an AJAX call to the server side, using $http from my Angular App.

(我正在尝试使用Angular App中的$http向服务器端进行AJAX调用。)

For sending the parameters, I tried the following:

(为了发送参数，我尝试了以下操作：)

$http({
    method: "post",
    url: URL,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: $.param({username: $scope.userName, password: $scope.password})
}).success(function(result){
    console.log(result);
});

This is working, but it is using jQuery as well at $.param .

(这是可行的，但它也在$.param使用jQuery。)

For removing the dependency on jQuery, I tried:

(为了消除对jQuery的依赖，我尝试：)

data: {username: $scope.userName, password: $scope.password}

but this seemed to fail.

(但这似乎失败了。)

Then I tried params :

(然后我尝试了params ：)

params: {username: $scope.userName, password: $scope.password}

but this also seemed to fail.

(但这似乎也失败了。)

Then I tried JSON.stringify :

(然后我尝试了JSON.stringify ：)

data: JSON.stringify({username: $scope.userName, password: $scope.password})

I found these possible answers to my quest, but was unsuccessful.

(我找到了这些可能的答案，但未成功。)

Am I doing something wrong?

(难道我做错了什么？)

I am sure, AngularJS would provide this functionality, but how?

(我敢肯定，AngularJS将提供此功能，但是如何？)

  ask by Veer Shrivastav translate from so

Answer 1

I think you need to do is to transform your data from object not to JSON string, but to url params.

(我认为您需要做的是将数据从对象转换为JSON参数，而不是JSON字符串。)

From Ben Nadel's blog .

(来自Ben Nadel的博客 。)

By default, the $http service will transform the outgoing request by serializing the data as JSON and then posting it with the content- type, "application/json".

(默认情况下，$ http服务将通过将数据序列化为JSON并将其发布为内容类型“ application / json”来转换传出请求。)

When we want to post the value as a FORM post, we need to change the serialization algorithm and post the data with the content-type, "application/x-www-form-urlencoded".

(当我们想将值发布为FORM时，我们需要更改序列化算法，并使用内容类型“ application / x-www-form-urlencoded”来发布数据。)

Example from here .

(这里的例子。)

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
    data: {username: $scope.userName, password: $scope.password}
}).then(function () {});

UPDATE(更新)

To use new services added with AngularJS V1.4, see

(要使用AngularJS V1.4中添加的新服务，请参阅)

• URL-encoding variables using only AngularJS services

  (仅使用AngularJS服务进行URL编码的变量)