如何在没有jQuery的情况下使用$ http发布urlencode表单数据?

2020/10/18 10:01 · javascript ·  · 0评论

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

我正在尝试使用$httpAngular应用程序对服务器端进行AJAX调用

为了发送参数,我尝试了以下操作:

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

这是可行的,但在上也使用jQuery $.param为了消除对jQuery的依赖,我尝试了:

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

但这似乎失败了。然后我尝试了params

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

但这似乎也失败了。然后我尝试了JSON.stringify

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

我找到了这些可能的答案,但未成功。难道我做错了什么?我敢肯定,AngularJS将提供此功能,但是如何?

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

来自Ben Nadel的博客

默认情况下,$ http服务将通过将数据序列化为JSON然后使用内容类型“ application / json”将其发布来转换外发请求。当我们想将值发布为FORM帖子时,我们需要更改序列化算法并使用内容类型“ application / x-www-form-urlencoded”发布数据。

这里的例子

$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服务进行URL编码的变量

使用AngularJS 1.4及更高版本,两个服务可以处理POST请求的url编码数据过程,从而无需transformRequest使用jQuery等外部依赖项来处理数据

  1. $httpParamSerializerJQLike-受jQuery启发的序列化器.param()推荐

  2. $httpParamSerializer -Angular本身用于GET请求的序列化器

用法示例

$http({
  url: 'some/api/endpoint',
  method: 'POST',
  data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded' // Note the appropriate header
  }
}).then(function(response) { /* do something here */ });

查看更详细的Plunker演示


如何$httpParamSerializerJQLike$httpParamSerializer不同

通常,与复杂数据结构$httpParamSerializer相比,它似乎使用的“传统” URL编码格式更少$httpParamSerializerJQLike

例如(忽略括号的百分比编码):

编码数组

{sites:['google', 'Facebook']} // Object with array property

sites[]=google&sites[]=facebook // Result with $httpParamSerializerJQLike

sites=google&sites=facebook // Result with $httpParamSerializer

编码对象

{address: {city: 'LA', country: 'USA'}} // Object with object property

address[city]=LA&address[country]=USA // Result with $httpParamSerializerJQLike

address={"city": "LA", country: "USA"} // Result with $httpParamSerializer

All of these look like overkill (or don't work)... just do this:

$http.post(loginUrl, `username=${ encodeURIComponent(username) }` +
                     `&password=${ encodeURIComponent(password) }` +
                     '&grant_type=password'
).success(function (data) {

问题是JSON字符串格式,您可以在数据中使用简单的URL字符串:

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: 'username='+$scope.userName+'&password='+$scope.password
}).success(function () {});

这是应该的方式(请不要更改后端……肯定不……如果您的前端堆栈不支持application/x-www-form-urlencoded,则将其丢弃……希望AngularJS可以!

$http({
     method: 'POST',
     url: 'api_endpoint',
     headers: {'Content-Type': 'application/x-www-form-urlencoded'},
     data: 'username='+$scope.username+'&password='+$scope.password
 }).then(function(response) {
    // on success
 }, function(response) {
    // on error
 });

在AngularJS 1.5中像魅力一样工作

亲爱的,让我们给您一些建议:

  • .then(success, error)在处理$http,忽略.sucess.error回调使用promise (因为它们已被弃用)

  • 在angularjs网站上您不能再将JSON_CALLBACK字符串用作占位符,以指定回调参数值应到达的位置。

如果您的数据模型比用户名和密码更复杂,您仍然可以这样做(如上所述)

$http({
     method: 'POST',
     url: 'api_endpoint',
     headers: {'Content-Type': 'application/x-www-form-urlencoded'},
     data: json_formatted_data,
     transformRequest: function(data, headers) {
          return transform_json_to_urlcoded(data); // iterate over fields and chain key=value separated with &, using encodeURIComponent javascript function
     }
}).then(function(response) {
  // on succes
}, function(response) {
  // on error
});

的文档encodeURIComponent可以在这里找到

如果是表单,请尝试将标题更改为:

headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";

如果它不是表单和简单的json,请尝试以下标头:

headers[ "Content-type" ] = "application/json";
$http({

    method: "POST",
    url: "/server.php",
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    data: "name='Олег'&age='28'",


}).success(function(data, status) {
    console.log(data);
    console.log(status);
});

$ http docs开始,这应该有效。

  $http.post(url, data,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
    .success(function(response) {
         // your code...
     });

您需要发布普通的javascript对象,别无其他

           var request = $http({
                method: "post",
                url: "process.cfm",
                transformRequest: transformRequestAsFormPost,
                data: { id: 4, name: "Kim" }
            });

            request.success(
                function( data ) {
                    $scope.localData = data;
                }
            );

如果您有php作为后端,那么您将需要做一些其他修改。.检出此链接以修复php服务器端

尽管答案很晚,但我发现有角度的UrlSearchParams对我来说效果很好,它也照顾参数的编码。

let params = new URLSearchParams();
params.set("abc", "def");

let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'});
let options = new RequestOptions({ headers: headers, withCredentials: true });
this.http
.post(UrlUtil.getOptionSubmitUrl(parentSubcatId), params, options)
.catch();

这对我有用。我在前端使用angular,在后端使用laravel php。在我的项目中,Angular Web将json数据发送到laravel后端。

这是我的角度控制器。

var angularJsApp= angular.module('angularJsApp',[]);
angularJsApp.controller('MainCtrl', function ($scope ,$http) {

    $scope.userName ="Victoria";
    $scope.password ="password"


       $http({
            method :'POST',
            url:'http://api.mywebsite.com.localhost/httpTest?callback=JSON_CALLBACK',
            data: { username :  $scope.userName , password: $scope.password},
            headers: {'Content-Type': 'application/json'}
        }).success(function (data, status, headers, config) {
            console.log('status',status);
            console.log('data',status);
            console.log('headers',status);
        });

});

这是我的php后端laravel控制器。

public function httpTest(){
        if (Input::has('username')) {
            $user =Input::all();
            return  Response::json($user)->setCallback(Input::get('callback'));
        }
    }

这是我的laravel路由

Route::post('httpTest','HttpTestController@httpTest');

在浏览器中的结果是

状态200

数据JSON_CALLBACK({“ username”:“ Victoria”,“ password”:“ password”,“ callback”:“ JSON_CALLBACK”});
httpTesting.js:18标头函数(c){a ||(a = sc(b));返回c?a [K(c)] || null:a}

chrome扩展名为postman。您可以用来测试后端网址是否正常。
https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=zh-CN

希望我的回答对您有所帮助。

本文地址:http://javascript.askforanswer.com/ruhezaimeiyoujquerydeqingkuangxiashiyong-httpfabuurlencodebiaodanshuju.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!