• angular的$http.post()提交数据到Java后台接收不到参数值问题的解决方法


    本文地址:http://www.cnblogs.com/jying/p/6733408.html    转载请注明出处;

    写此文的背景:在工作学习使用angular的$http.post()提交数据时,后台接收不到参数值,于是查阅了相关资料,寻找解决办法。

    前端:html,jquery,angular
    后端:java,springmvc

    一、平常使用的post提交和接收方式

      前端使用jquery提交数据。  

    $.ajax({
      url:'/carlt/loginForm',
      method: 'POST',  
      data:{"name":"jquery","password":"pwd"},
      dataType:'json',
      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; }

    后台输出结果正确。

    二、使用angularJs的post方法提交

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

    后台输出结果为空:username:null,password:null

    三、解决angular提交post问题

      A、改前端

      参考地址:http://www.cnblogs.com/humaotegong/articles/5641943.html

      B、改后台Java(在User前加上@RequstBody,因为angular提交的是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

      注解:

      i) @RequestBody用于读取Request请求的body部分数据,使用系统默认配置的HttpMessageConverter进行解析,然后把相应的数据绑定到要返回的对象上;

      ii) 再把HttpMessageConverter返回的对象数据绑定到 controller中方法的参数上。

    四、解决了angular问题之后,发现jquery按照原来的方式提交post请求会报错(错误码415)。

      如下方式可以解决jquery提交问题:  

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

    还需特别注意:Java接收参数最好为类对象(如本文中的User对象),如果用分参数格式,会获取到一个json字符串,还需额外的解析处理,使用不方便。

    本文参考地址:http://www.cfei.net/archives/24102

  • 相关阅读:
    vue定时调用接口
    vue初始化页面加载数据
    elementUI提示框
    vue+axios使用get请求
    Summernote编辑器的使用
    Springboot返回json对象
    vue+axios使用post请求
    Nginx负载均衡当其中一台服务器挂掉之后,Nginx负载将会怎样呢?
    vue解决前端输入框不能输入问题
    vue获取html文本化,页面转为html格式渲染
  • 原文地址:https://www.cnblogs.com/jying/p/6733408.html
Copyright © 2020-2023  润新知