AngularJs表单提交

最新推荐文章于 2020-12-29 12:24:36 发布

我是全栈架构师

最新推荐文章于 2020-12-29 12:24:36 发布

阅读量4.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/mxj588love/article/details/78811627

angularjs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的简单汽车信息表单提交案例，包括前端页面设计和后端处理逻辑。前端利用AngularJS框架进行数据双向绑定，并通过$http服务向后端发送POST请求；后端采用Java语言编写RESTful API接收并处理这些数据。

页面

<body ng-app="myApp">
<form ng-submit="submitForm()" ng-controller="carController">
    汽车品牌:<input type="text" ng-model="car.brand"/> <br/>
    汽车颜色:<input type="text" ng-model="car.color"/> <br/>
    <button type="submit">submit</button>
</form>
<script>
var app = angular.module("myApp",[]);
    app.controller('carController',function ($scope,$http) {
        $scope.submitForm = function () {
            console.log('enter submitForm');
            $http({
                method:'post',
                url:'/addCar',
                data:$.param($scope.car),
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(function(resp){
                console.log('post success');
                console.log(resp);
            },function(resp){
                console.log('post error');
                console.log(resp);
            });
        }
    });
</script>
</body>

后台

@Controller
@RequestMapping
public class CarController {

    @RequestMapping("/addCar")
    @ResponseBody
    public Car addCar(Car car){
        if(car!=null) car.setId(101L);
        System.out.println("enter addCar");
        System.out.println("car:"+car);
        return car;
    }
}