Kaedah untuk menyelesaikan masalah bahawa latar belakang tidak dapat menerima nilai parameter semasa menyerahkan data dalam $http.post()_AngularJS sudut

Latar belakang untuk menulis artikel ini: Semasa saya belajar menggunakan $http.post() angular untuk menyerahkan data, latar belakang tidak dapat menerima nilai parameter, jadi saya merujuk maklumat yang berkaitan untuk mencari penyelesaian.

Tujuan menulis artikel ini: melalui penyelesaian dalam artikel yang disebutkan di atas dan digabungkan dengan pengalaman saya sendiri, saya merumuskan penemuan berikut.
Halaman hadapan: html, jquery, sudut
Halaman belakang: java, springmvc
1 Kaedah penyerahan dan penerimaan pos yang biasa digunakan
Halaman hadapan menggunakan jquery untuk. menyerahkan data.

$.ajax({
  url:'/carlt/loginForm',
  method: 'POST',  
  data:{"name":"jquery","password":"pwd"},
  dataType:'json',
  success:function(data){
    //...
  }
});

Sambutan java belakang:

@Controller
public class UserController {
  @ResponseBody
  @RequestMapping(value="/loginForm",method=RequestMethod.POST)
  public User loginPost(User user){
    System.out.println("username:"+user.getName());
    System.out.println("password:"+user.getPassword());
    return user;
  }
}
model（不要忘记get、set方法）：
public class User {
  private String name;
  private String password;
  private int age;
  
  //setter getter method

}

Pencetakan latar belakang:

nama pengguna:jquery
kata laluan:pwd

Hasil pulangan bahagian hadapan dilihat dengan memanggil antara muka:

2. Gunakan kaedah siaran angularJs untuk menyerahkan

<div ng-app="myApp" ng-controller="formCtrl">
 <form novalidate>
 UserName:<br>
 <input type="text" ng-model="user.username"><br>
 PassWord:<br>
 <input type="text" ng-model="user.pwd">
 <br><br>
 <button ng-click="login()">登录</button>
 </form>
</div>

kod js:

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope,$http) {
 $scope.login = function() {
  $http({
   url:'/carlt/loginForm',
   method: 'POST',   
   data: {name:'angular',password:'333',age:1}  
  }).success(function(){
   console.log("success!");
  }).error(function(){
   console.log("error");
  })
 };
});

Hasil pencetakan latar belakang:

nama pengguna:null
kata laluan:null：

Lihat hujung hadapan:

3. Selesaikan sudut Hantar soalan pos.
Saya percaya bahawa mereka yang telah membaca artikel yang dinyatakan di atas pun sudah tahu bagaimana untuk menyelesaikan masalah tersebut. Artikel itu mengubah cara sudut menyerahkan data, menjadikan cara sudut menyerahkan data lebih seperti jquery.

Saya mencubanya dan ia berkesan. Kemudian saya cuba cara lain. Seperti berikut:

Hujung depan kekal tidak berubah, masih:

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope,$http) {
  $scope.login = function() {
    $http({
      url:'/carlt/loginForm',
      method: 'POST',      
      data: {name:'angular',password:'333',age:1}   
    }).success(function(){
      console.log("success!");
    }).error(function(){
      console.log("error");
    })
  };
});

Hujung belakang telah berubah, tetapi Tambah @RequstBody di hadapan Pengguna, kerana sudut menyerahkan objek json:

@Controller
public class UserController {
  @ResponseBody
  @RequestMapping(value="/loginForm",method=RequestMethod.POST)
  public User loginPost(@RequestBody User user){
    System.out.println("username:"+user.getName());
    System.out.println("password:"+user.getPassword());
    return user;
  }
}
@RequestBody

Fungsi:

i) Anotasi ini digunakan untuk membaca bahagian badan permintaan Permintaan, gunakan HttpMessageConverter konfigurasi lalai sistem untuk menghuraikan, dan kemudian mengikat data yang sepadan kepada objek yang akan dikembalikan pada objek;

ii) Kemudian ikat data objek yang dikembalikan oleh HttpMessageConverter kepada parameter kaedah dalam pengawal.

Masa penggunaan:

A) Pemasa kaedah GET dan POST dinilai mengikut nilai pengepala permintaan Jenis Kandungan:

application/x-www-form-urlencoded, pilihan (iaitu, tidak perlu, kerana data dalam kes ini @RequestParam, @ModelAttribute juga boleh diproses, dan sudah tentu @RequestBody juga boleh diproses); > data berbilang bahagian/bentuk, tidak boleh diproses (iaitu, data dalam format ini tidak boleh diproses menggunakan @RequestBody
Format lain diperlukan (format lain termasuk aplikasi/json, aplikasi/xml, dsb. Data dalam ini); format mesti diproses menggunakan @RequestBody) ;
B) Apabila menyerahkan dalam mod PUT, nilai berdasarkan nilai
pengepala permintaan Content-Type:

application/x-www- form-urlencoded, diperlukan;

multipart /form-data, tidak boleh diproses
Format lain diperlukan; daripada bahagian pengepala;

4. Penyelesaian Selepas menyelesaikan masalah sudut, saya mendapati bahawa jquery akan melaporkan ralat (kod ralat 415) apabila menghantar permintaan pos dengan cara asal.

Kaedah berikut boleh menyelesaikan masalah penyerahan jquery:

$.ajax({
  url:'/carlt/loginForm',
  method: 'POST',
  contentType:'application/json;charset=UTF-8',
  data:JSON.stringify({"name":"jquery","password":"pwd"}),
  dataType:'json',
  success:function(data){
    //...
  }
});

json penukaran objek rentetan json: JSON.stringify(jsonObj);

Di atas ialah kaedah untuk menyelesaikan masalah bahawa latar belakang tidak boleh menerima nilai parameter ​​​​apabila angular $http.post() menyerahkan kandungan data_AngularJS, sila lawati untuk kandungan yang lebih berkaitan Ikuti laman web PHP Cina (www.php.cn)!