AngularJS表单提交实例详解
本文实例讲述了AngularJS表单提交。分享给大家供大家参考，具体如下：
AngularJS中的数据绑定
AngularJS创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。
ng-app属性声明所有被其包含的内容都属于这个AngularJS应用，这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响。
当AngularJS认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变“脏”。如果该值从上次事件循环运行之后发生了变化，则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。
这个过程被称作脏检查。脏检查是检查数据模型变化的有效手段。当有潜在的变化存在时，AngularJS会在事件循环时执行脏检查来保证数据的一致性。
借助AngularJS，不需要构建复杂和新的JavaScript功能，就可以在视图中实现类自动同步的机制。
我们使用ng-model指令将内部数据模型对象($scope)中的name属性绑定到了文本输入字段上。
数据模型对象是指$scope对象。$scope对象是一个简单的JavaScript对象，其中的属性可以被视图访问，也可以同控制器进行交互。
双向数据绑定意味着如果视图改变了某个值，数据模型会通过脏检查观察到这个变化，而如果数据模型改变了某个值，视图也会一句变化重新渲染。
模块
在AngularJS中，模块是定义应用的最主要的方式。模块包含了主要的应用代码，它允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。
angular.module('myApp',[]);
控制器
AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自定义行为。
当我们在页面上创建一个新的控制器时，AngularJS会生成并传递一个新的$scope给这个控制器。
AngularJS同其他JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。
表达式
用{{}}符号将一个变量绑定到$scope上的写法本质上就是一个表达式：{{expression}}。对表达式进行的任何操作，都会在其所属的作用域内部执行，因此可以在表达式内部调用那些限制在此作用域内的bianl，并进行循环、函数调用、将变量应用到数学表达式中等操作。
本例子采用技术
① 页面使用bootstrap布局，页面是bootstrap的模板
② 前端框架AngularJS
③ 后台使用SpringMVC
整个代码的功能是在输入内容后，提交给后台，后台再返回数据显示到页面，提交时有验证提示。
我在这里列举了三种方式来做这次应用
1.全局作用域的控制器
2.模块划分的控制器
3.将后台请求做成服务抽离出来的控制器
JSP代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>接口测试</title>
<!-- Bootstrap -->
<link href="css/bootstrap/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<div ng-controller="keepController">
<form name="testForm" novalidate>
<div id="responseMsg" class="testMode" >
<div>
<h3>认证接口：</h3>
<textarea required class="form-control" rows="3" id="authData" name="authData" ng-model="authData"></textarea>
<span style="color:red" ng-show="testForm.authData.$dirty && testForm.authData.$invalid">
<span ng-show="testForm.authData.$error.required">认证接口必填</span>
</span>
</div>
<div>
<h3>数据请求接口：</h3>
<textarea required class="form-control" rows="3" id="reqData" name="reqData" ng-model="reqData"></textarea>
<span style="color:red" ng-show="testForm.reqData.$dirty && testForm.reqData.$invalid">
<span ng-show="testForm.reqData.$error.required">数据请求接口必填</span>
</span>
</div>
<div style="text-align: right;margin-right: 20px;margin-top:10px;">
<button class="btn btn-default" role="button" ng-click="keepTest()"
ng-disabled="testForm.authData.$invalid ||
testForm.reqData.$invalid"
>连接测试</button>
</div>
<div>{{ansInfo}}</div>
</div>
</form>
</div>
<script src="js/angularJS/angular.min.js"></script>
<script type="text/javascript">
//1.全局作用域的例子
/* function keepController($scope,$http) {
$scope.keepTest= function(){
var pData = {authData:$scope.authData,reqData:$scope.reqData};
$http({method:'POST',url:'testKeep',params:pData}).
success(function(response) {
$scope.ansInfo = response.a;});
};
} */
//2.模块化控制器
/*var app = angular.module('MyApp',[]);
app.controller('keepController',function($scope,$http){
$scope.keepTest= function(){
var pData = {authData:$scope.authData,reqData:$scope.reqData};
$http({method:'POST',url:'testKeep',params:pData}).
success(function(response) {
$scope.ansInfo=response.a;});
}
}); */
//3.请求服务抽出来的控制器
angular.module('myapp.services',[]).factory('testService',function($http){
var runRequest = function(pData){
return $http({method:'POST',url:'testKeep',params:pData});
};
return {
events:function(pData){
return runRequest(pData);
}
};
});
angular.module('MyApp',['myapp.services']).
controller('keepController',function($scope,testService){
$scope.keepTest= function(){
var pData = {authData:$scope.authData,reqData:$scope.reqData};
testService.events(pData).success(function(response){
$scope.ansInfo=response.a;
});
};
});
</script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
</body>
</html>
JAVA代码：
@RequestMapping(value = "testKeep", produces = "text/plain;charset=UTF-8")
@ResponseBody
public String testKeep(HttpServletRequest request,
HttpServletResponse response) {
System.out.println(request.getParameter("authData"));
System.out.println(request.getParameter("reqData"));
JSONObject ja = new JSONObject();
ja.put("a", "aaa");
ja.put("b", "bbb");
ja.put("c", "ccc");
System.out.println("test:"+ja.toString());
return ja.toString();
}
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关推荐
-
AngularJS使用ngMessages进行表单验证
AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="
-
AngularJS中实现用户访问的身份认证和表单验证功能
身份验证 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们
-
使用AngularJS对表单提交内容进行验证的操作方法
AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.它有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等--使用它可以大大减少书写代码的工作量,但和Jquery不同,使用AngularJS有一定的难度,因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证. AngularJS对表单中常用的验证操作 $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine
-
AngularJS实现表单手动验证和表单自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给form元素加上novalidate="novalidate": 2.给form元素加上name="theForm",如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1&quo
-
AngularJS模仿Form表单提交的实现代码
废话不多说了,直接给大家贴代码了. $http({ url: "http://localhost:10086/yuanxin/Conference/ImportExcelDataForBusRoute", method: 'Post', headers: { 'Content-Type': 'multipart/form-data' }, data: { BusRoute: file, ConferenceID: "1" }, transformRequest: f
-
详解AngularJS实现表单验证
开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <<input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <<input type="tex
-
AngularJS使用angular-formly进行表单验证
当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的: <some-form fiedls="vm.someFields" ...></some-form> 然后,在controller中定义各个字段以及验证.angular-formly就是为这个需求而存在. 在controller中,把各个字段定义在数组中: vm.rentalFields = [ { key:'first_name', type
-
angularjs $http实现form表单提交示例
需求:请求第三方后台接口返回一段html字符串如下,由前端去实现form表单的POST提交, 说明:form表单submit()实现自动提交input标签hidden,注意script代码中的document.redirect.submit(); <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head
-
AngularJS表单提交实例详解
本文实例讲述了AngularJS表单提交.分享给大家供大家参考,具体如下: AngularJS中的数据绑定 AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM.任何一个独立视图组件中的值都是动态替换的. ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是我们可以在Web应用中嵌套AngularJS应用的原因.只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响. 当AngularJS认为某个值可能发生变化时,它会运行
-
AngularJs表单验证实例详解
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="
-
微信小程序 PHP后端form表单提交实例详解
微信小程序 PHP后端form表单 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的数据都要以JSON的形式返回给小程序. 2.昨天写了登录注册.忘记密码功能,他们实质上都是一个表单提交操作.因此就拿注册功能来写这个例子. 3.目录图 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于
-
Angular表单验证实例详解
表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlength,maxlength,required呀这些个东西,还有也支持h5的那些验证,h5的那些验证,就是type啦,type='email',number,url呀这些,然后现在要用angular来验证,可以定义样式哈,不错,然后怎么验证呢,好的上代码 <!DOCTYPE html> <ht
-
微信小程序 表单Form实例详解（附源码）
微信小程序 表单Form实例 表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的"switch","input","checkbox","slider","radio","picker"的值进行提交,数据的格式为:name:value,所以表单中控件都需要添加name属性,否则找不到对应控件
-
CI框架表单验证实例详解
本文实例讲述了CI框架表单验证的方法.分享给大家供大家参考,具体如下: 1.form头部信息的自动输出函数(view) <?php $attributes = array('class' => 'email', 'id' => 'myform'); echo form_open('email/send', $attributes); //上面一行代码输出: //<form method="post" accept-charset="utf-8"
-
AngularJs表单验证实例代码解析
常用的表单验证指令如下详情: 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.
-
Angular4表单验证代码详解
背景: 最近在itoo页面调整的时候,发现页面表单或者是文本框没有做基本的判断操作,所以着手demo一篇,希望对大家有帮助!! -------------------------------------------------------------------------------- 1.创建表单组件: ng g c login1 2.1单规则验证: <label>用户名:</label> <input type="text" #userNameRe
-
Oracle删除表及查看表空间的实例详解
Oracle常用的基本命令 --1.用户下表中注释模糊查询: 例如查询与优惠券关联的表 SELECT * FROM user_tab_comments t WHERE t.comments LIKE '%优惠券%'; ![这里写图片描述](http://img.blog.csdn.net/20170321112728053?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDQyNzkzNQ==/font/5a6L5L2T/fontsize/40
-
java 线性表接口的实例详解
java 线性表接口的实例详解 前言: 线性表是其组成元素间具有线性关系的一种线性结构,对线性表的基本操作主要有插入.删除.查找.替换等,这些操作可以在线性表的任何位置进行.线性表可以采用顺序存储结构和链式存储结构表示. 本接口的类属于dataStructure包的linearList子包.线性表接口LList声明如下,描述线性表的取值.置值.插入.删除等基本操作. package dataStructure.linearList; public interface LList<E> { bo