首页 > web前端 > js教程 > 如何使用 AngularJS 的 $http 服务发布 URL 编码的表单数据?

如何使用 AngularJS 的 $http 服务发布 URL 编码的表单数据?

Linda Hamilton
发布: 2024-12-11 05:16:11
原创
965 人浏览过

How to POST URL-Encoded Form Data with AngularJS's $http Service?

在 AngularJS 中使用 $http 发布 URL 编码的表单数据

理解问题

作为 AngularJS 新用户,您在使用 $http 服务向服务器发送数据时遇到了挑战。具体来说,您在尝试以 URL 编码格式发送数据时遇到了问题。

解决方案

要解决此问题,您需要将数据转换为 URL参数而不是 JSON 字符串。 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". 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".
登录后复制

示例

这是一个示例,演示如何使用 $http:

发布 URL 编码的表单数据
$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 () {});
登录后复制

AngularJS v1.4 和的更新稍后

对于 AngularJS v1.4 及更高版本,您可以利用可用的新服务来实现相同的结果:

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: $httpParamSerializer
});
登录后复制

以上是如何使用 AngularJS 的 $http 服务发布 URL 编码的表单数据?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板