困擾了我好幾天的問題！！！

剛開始學(xué)play框架，在向后臺(tái)傳值時(shí)，一直不成功！

當(dāng)你用$POST傳遞一個(gè)參數(shù)時(shí):

HTML：

<button ng-click=test()>測(cè)試</button>

JS：

①

　　$scope.test = function() {

　　　　$http({
　　　　　　method: 'POST',
　　　　　　url: '/Application/jump',
　　　　　　data:{name:"zby"},
　　　　}).then(function successCallback(response) {
　　　　　　// 請(qǐng)求成功執(zhí)行代碼
　　　　　　}, function errorCallback(response) {
　　　　// 請(qǐng)求失敗執(zhí)行代碼
　　　　});

　　}

我的后臺(tái)控制器方法：

　　public static void test(String name) {
　　　　System.out.println(name);

　　　　System.out.println(params.get("name"));

　　}

這樣傳到后臺(tái)的值為NULL，NULL。

我把JS換成：

②

　　$scope.test = function() {
　　　　$http({
　　　　　　method: 'POST',
　　　　　　url: '/Application/test',
　　　　　　params: {name:"zby"},
　　　　}).then(function successCallback(response) {
　　　　　　// 請(qǐng)求成功執(zhí)行代碼
　　　　}, function errorCallback(response) {
　　　　　　// 請(qǐng)求失敗執(zhí)行代碼
　　　　});
　　}

后臺(tái)控制器方法不變。

傳到后臺(tái)的值為zby，zby。

同理傳遞多個(gè)參數(shù)也能成功，只要把JS里的params與后臺(tái)控制器的test的參數(shù)改成多個(gè)就行，但是兩個(gè)參數(shù)名字，個(gè)數(shù)必須一致。

還有一種方法則是把傳遞的值直接寫入U(xiǎn)RL里，把JS改成

③

　　$scope.test = function() {
　　　　var name = "zby";
　　　　$http({
　　　　　　method: 'POST',
　　　　　　url: '/Application/test?name=' + name,
　　　　}).then(function successCallback(response) {
　　　　　　// 請(qǐng)求成功執(zhí)行代碼
　　　　}, function errorCallback(response) {
　　　　　　// 請(qǐng)求失敗執(zhí)行代碼
　　　　});
　　}

后臺(tái)控制器方法不變，照樣能接收到后臺(tái)傳來的值。

接下來看看$get方法傳值:

①方法傳到后臺(tái)的值與$post一樣為NULL，NULL。

②方法傳到后臺(tái)的值與$post一樣為zby，zby。

③方法傳到后臺(tái)的值與$post一樣為zby，zby。

所以能看出來這三種方法$post，$get傳值都一樣。

接下來我們看看第四種方法

④

　　$scope.test = function() {
　　　　$http({
　　　　　　method: 'POST',
　　　　　　url: '/Application/test',
　　　　　　data: {name: "zby"},
　　　　　　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("&");
　　　　　　}
　　　　}).then(function successCallback(response) {
　　　　　　// 請(qǐng)求成功執(zhí)行代碼
　　　　}, function errorCallback(response) {
　　　　　　// 請(qǐng)求失敗執(zhí)行代碼
　　　　});
　　}

后臺(tái)控制器方法不變，傳遞到后臺(tái)的值為zby，zby。

那么我們看看這種方法GET請(qǐng)求行不行，將JS里的method改為method: 'GET',傳遞到后臺(tái)的值為NULL，NULL。

$get請(qǐng)求并不能用這種方法傳遞，而$post確可以。這是為什么呢？

來看看這四種方法的request請(qǐng)求到底發(fā)了啥數(shù)據(jù)過來

第①種：

$post

$get

第②種：

$post

$get

第③種：

$post

$get

第④種：

$post:

$get:

通過測(cè)試可知，

在第②種方法與第③種方法中，$post與$get請(qǐng)求都能夠向后臺(tái)傳值，并且通過圖的比較可知都是通過Query String Parameters傳值

在第①種方法中，$post與$get請(qǐng)求不能向后臺(tái)傳值，但是$post請(qǐng)求的圖中多出了

在第④種方法中，$get請(qǐng)求不能向后臺(tái)傳值，而$post請(qǐng)求能向后臺(tái)傳值，并且第①種與第④種的區(qū)別在于第④種方法添加了如下代碼：

　　　　　　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("&");?
　　　　　　}?

為什么加了這段代碼$post請(qǐng)求就可以傳值成功了呢？

我們看看兩種的區(qū)別：

①：

④：

可以發(fā)現(xiàn)AngularJs用post 提交數(shù)據(jù) 以 json 格式提交的，而平時(shí)我們jquery post 提交數(shù)據(jù)是以 form-data 的形式提交的，只有把它轉(zhuǎn)化為form-data形式后臺(tái)才能接收到。

解決方法就是：改AngularJs 提交數(shù)據(jù)的方式，配置?header?值，使用?transformRequest對(duì)提交數(shù)據(jù)進(jìn)行序列化，把 json 對(duì)象更改為字符串。

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhengbiyu/p/8428083.html

總結(jié)

以上是生活随笔為你收集整理的angular js $post,$get请求传值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。