Angular의 $http.post()_AngularJS에서 데이터를 제출할 때 배경이 매개변수 값을 수신할 수 없는 문제를 해결하는 방법-JS 튜토리얼-php.cn

Angular의 $http.post()_AngularJS에서 데이터를 제출할 때 배경이 매개변수 값을 수신할 수 없는 문제를 해결하는 방법

PHP中文网

풀어 주다： 2016-05-16 15:26:42

원래의

2561명이 탐색했습니다.

이 글을 쓰게 된 배경:Angular의 $http.post()를 사용하여 데이터를 제출하는 방법을 배울 때 배경에서 매개변수 값을 받을 수 없어서 관련 정보를 참고하여 해결책을 찾았습니다.

이 글을 쓴 목적: 위에서 언급한 글의 해결책과 내 경험을 결합하여 다음과 같은 결과를 요약했습니다.
프런트엔드: html, jquery, angle
백엔드: java, springmvc
1. 일반적으로 사용되는 게시물 제출 및 수신 방법
프론트엔드는 jquery를 사용합니다. 데이터를 제출합니다.

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

로그인 후 복사

백엔드 Java 수신:

@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

}

로그인 후 복사

백그라운드 인쇄:

사용자 이름:jquery
password:pwd

인터페이스를 호출하여 본 프런트엔드 반환 결과:

Angular의 $http.post()_AngularJS에서 데이터를 제출할 때 배경이 매개변수 값을 수신할 수 없는 문제를 해결하는 방법

2.angularJs의 post 메소드를 사용하여

<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>

로그인 후 복사

js 코드:

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

로그인 후 복사

백그라운드 인쇄 결과:

사용자 이름:null
비밀번호:null:

프런트 엔드 보기:

3. Angle 해결 게시물 질문을 제출해주세요.
위에 언급된 글들을 읽어보신 분들도 이미 문제 해결 방법을 알고 계시리라 믿습니다. 이 기사에서는 각도가 데이터를 제출하는 방식을 변경하여 각도의 데이터 제출 방식을 jquery와 더 유사하게 만듭니다.

해봤는데 효과가 있었어요. 그런 다음 다른 방법을 시도했습니다. 다음과 같습니다.

프런트 엔드는 변경되지 않고 그대로 유지됩니다.

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

로그인 후 복사

백 엔드 변경되었지만 각도가 json 객체를 제출하기 때문에 User 앞에 @RequstBody를 추가합니다.

@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

로그인 후 복사

함수:

i) 이 주석은 요청 요청의 본문 부분을 읽고 시스템의 기본 구성된 HttpMessageConverter를 사용하여 구문 분석한 다음 해당 데이터를 바인딩하는 데 사용됩니다.

ii) 그런 다음 HttpMessageConverter에서 반환된 개체 데이터를 컨트롤러의 메서드 매개 변수에 바인딩합니다.

사용 타이밍:

A) GET 및 POST 메소드 타이밍은 요청 헤더 Content-Type 값에 따라 판단됩니다.

application/x-www-form-urlencoded, 선택 사항(이 경우에는 @RequestParam, @ModelAttribute도 처리할 수 있고 물론 @RequestBody도 처리할 수 있으므로 반드시 필요하지는 않습니다); > multipart/form- 데이터는 처리할 수 없습니다(즉, 이 형식의 데이터는 @RequestBody를 사용하여 처리할 수 없습니다).
다른 형식이 필요합니다(다른 형식에는 application/json, application/xml 등이 포함됩니다. @RequestBody)를 사용하여 형식을 처리해야 합니다.
B) PUT 모드로 제출하는 경우
요청 헤더 Content-Type:

application/x-www- 값을 기준으로 판단합니다. form-urlencoded, 필수;

multipart /form-data, 처리할 수 없습니다.
다른 형식이 필요합니다.
참고: 요청 본문 부분의 데이터 인코딩 형식은 Content-Type에 의해 지정됩니다. of the header part;

4. 해결 방법 각도 문제를 해결한 후 원래 방식으로 게시물 요청을 제출하면 jquery가 오류(오류 코드 415)를 보고하는 것을 발견했습니다.

다음 방법으로 jquery 제출 문제를 해결할 수 있습니다.

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

로그인 후 복사

json 객체 변환 json string: JSON.stringify(jsonObj);

위는angular의 $http.post()가 data_AngularJS 콘텐츠를 제출할 때 배경이 매개변수 값을 수신할 수 없는 문제를 해결하는 방법이며, 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트(m.sbmmt.com)를 팔로우하세요!