Javascript 在没有jQuery的情况下，如何使用$http发布URL编码的表单数据？_Javascript_Jquery_Angularjs_Ajax_Angularjs Http

Javascript 在没有jQuery的情况下，如何使用$http发布URL编码的表单数据？

javascript jquery angularjs ajax

Javascript 在没有jQuery的情况下，如何使用$http发布URL编码的表单数据？,javascript,jquery,angularjs,ajax,angularjs-http,Javascript,Jquery,Angularjs,Ajax,Angularjs Http,我是AngularJS新手，首先，我想只使用AngularJS开发一个新的应用程序我正在尝试使用Angular应用程序中的$http对服务器端进行AJAX调用为了发送参数，我尝试了以下方法： $http({ method: "post", url: URL, headers: {'Content-Type': 'application/x-www-form-urlencoded'}, data: $.param({username: $scope.userNa

我是AngularJS新手，首先，我想只使用AngularJS开发一个新的应用程序

我正在尝试使用Angular应用程序中的

$http

对服务器端进行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);
});

这是可行的，但它也在

$.param

中使用jQuery。为了删除对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会提供此功能，但如何实现呢？

从文档中可以看出，这应该是可行的

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

从文件上看，这应该行得通

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

如果是表单，请尝试将标题更改为：

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

如果不是表单和简单的json，请尝试以下标题：

headers[ "Content-type" ] = "application/json";

如果是表单，请尝试将标题更改为：

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

如果不是表单和简单的json，请尝试以下标题：

headers[ "Content-type" ] = "application/json";

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

默认情况下，$http服务将通过以下方式转换传出请求：将数据序列化为JSON，然后将其与内容一起发布- 键入“application/json”。当我们想将值作为表单发布时 post，我们需要更改序列化算法并发布数据内容类型为“application/x-www-form-urlencoded”

例如

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

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

例如

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

您只需发布普通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服务器端

您需要发布纯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服务器端

这对我来说很有效。我使用angular作为前端，使用laravel php作为后端。在我的项目中，AngularWeb将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);
        });

});

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

这是我的php后端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);
        });

});

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

这是我的拉威尔路线

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

浏览器中的结果是

状态200
数据JSON_回调（{“用户名”：“维多利亚”，“密码”：“密码”，“回调”：“JSON_回调”}）； js:18头函数（c）{a | |（a=sc（b））；返回 c？a[K（c）]| | null:a}

有一个叫做邮递员的chrome分机。您可以使用测试后端url是否正常工作。

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

这对我很有用。我使用angular作为前端，使用laravel php作为后端。在我的项目中，AngularWeb将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);
        });

});

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

这是我的php后端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);
        });

});

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

这是我的拉威尔路线

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

浏览器中的结果是

有一个叫做邮递员的chrome分机。您可以使用测试后端url是否正常工作。

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

所有这些看起来都有些过火（或者不起作用）。。。只要这样做：

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

所有这些看起来都太过分了（或者不起作用）。。。只要这样做：

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

仅使用AngularJS服务的URL编码变量使用AngularJS 1.4及更高版本，两个服务可以处理POST请求的url编码数据过程，无需使用

transformRequest

或使用外部依赖项（如jQuery）操作数据：

-受jQuery启发的序列化程序（推荐）

-Angular本身用于GET请求的序列化程序

带有$http（）的示例

带有$http.post（）的示例

$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
•对对象进行编码

$http.post( 'some/api/endpoint', 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

{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
仅使用AngularJS服务的URL编码变量使用AngularJS 1.4及更高版本，两个服务可以处理POST请求的url编码数据过程，无需使用
transformRequest
或使用外部依赖项（如jQuery）操作数据：

-受jQuery启发的序列化程序（推荐）

-Angular本身用于GET请求的序列化程序

带有$http（）的示例

带有$http.post（）的示例

$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
•编码对象