angularjs表单数据提交-对象方式提交

最新推荐文章于 2023-05-16 17:18:14 发布

原创最新推荐文章于 2023-05-16 17:18:14 发布 · 1.3w 阅读

1 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现表单提交的例子。通过HTML和JavaScript代码展示了如何定义表单字段并将其与控制器和业务逻辑连接起来。该示例包括了基本的表单元素、数据绑定以及表单提交处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html代码

<body ng-app="Power" ng-controller="userCtrl" ng-init="initData()">
用户名：<input type="text" ng-model="user.username" /><br/>
密码：<input type="text" ng-model="user.password" />
<input type="button" value="提交" ng-click="saveUser()" /> 
</body>

2.service代码

this.saveUser=function(user){
    		
    		var deferred = $q.defer();

            $http.get("userAction!doNotNeedSession_add.action", {
            	params:user//传整个表单数据
            }).success(function (data) {
                // 如果连接成功，延时返回给调用者
                deferred.resolve(data);
            })
                .error(function () {
                    deferred.reject('连接服务器出错！');
                })
            return deferred.promise;
    		
    	};

3.controller代码

$scope.user={username:'',password:''};
    	
    	
    	$scope.saveUser=function () {
    		userService.saveUser($scope.user).then(function (data) {
                console.info(data);
                

            });
        };