`

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="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();
 }
 
 
 
0
0
分享到:
评论
1 楼 AUQF_zy 2016-04-08  
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;}); 
   }; 
 

博主你好!我想请教一下这个全局作用域是怎么使用的。谢谢!!

相关推荐

    Angularjs 动态添加表单

    通过阅读和理解这个项目,你可以学习到如何在AngularJS中实现动态添加表单的完整流程,包括创建动态表单、数据模型的管理以及表单的验证和提交。 ### 5. 环境要求 注意,这个项目需要在Apache环境下运行,因为某些...

    AngularJs demo 例子(表单验证) form

    使用`ngSubmit`处理表单提交** 使用`ngSubmit`指令,可以定义当表单被提交时执行的函数。这个函数通常会负责验证所有字段,并在验证通过后发送数据到服务器。 ```html ()"&gt; &lt;!-- 表单元素 --&gt; $invalid"&gt;提交 ...

    angularjs $http实现form表单提交示例

    在Web开发中,AngularJS是一个强大的JavaScript框架,用于构建动态单页应用程序(SPA)。本文将深入探讨如何使用AngularJS的$http服务来实现一个form表单...希望本文的内容对你在使用AngularJS处理表单提交时有所帮助。

    AngularJS表单基础

    该函数可以定义为处理表单提交逻辑的函数,在这个例子中,它会弹出一个提示框显示"保存数据!"。 总结以上知识点,AngularJS通过其指令和数据绑定系统极大地简化了Web表单的处理流程,使得开发者能够更加专注于业务...

    angularJS提交表单(form)

    `ng-form`指令用于创建一个AngularJS表单,它会自动添加一个默认的表单控制器。这里的`test`是表单的名字,可以在控制器中引用。`ng-model`指令绑定输入框的值到 `$scope.a`,并且类型为`email`,这意味着AngularJS...

    详细分析使用AngularJS编程中提交表单的方式

    在AngularJS编程中,提交表单的方式相比传统的...通过这种方式,AngularJS简化了表单提交的过程,使得前端和后端的交互更加简洁高效。同时,其内置的验证机制和双向数据绑定特性,提高了用户体验,降低了开发复杂性。

    AngularJS实现表单手动验证和表单自动验证

    自动验证是AngularJS表单验证中的另一种方式。AngularJS利用HTML5的表单验证特性,如required、pattern、min、max等,自动地对表单元素进行验证,无需开发者编写额外的验证逻辑代码。 当表单元素符合HTML5验证要求...

    angularjs 表单密码验证自定义指令实现代码

    以上是根据给定的文件信息总结的关于AngularJS表单密码验证自定义指令实现的核心知识点。通过这些知识点的学习,开发者可以创建出更加复杂和符合业务需求的自定义指令,以提升应用的用户体验和数据的准确性。

    AngularJS模仿Form表单提交的实现代码

    为了克服这些限制,AngularJS提供了一种模拟表单提交的方法,允许开发者更加灵活地处理数据发送和接收。本文将通过一个具体的实例代码来讲解如何在AngularJS中模仿Form表单提交。 在AngularJS中,我们通常使用$http...

    AngularJS表单基本操作

    虽然例子中没有包含表单提交,通常你可以通过`ng-submit`指令来定义表单的提交行为,例如调用服务器端API来处理数据。 总的来说,AngularJS提供了一套完整的表单处理框架,使得开发者可以高效地构建动态、交互性强...

    AngularJS实现表单验证功能详解

    在这个例子中,我们通过ng-model绑定了表单控件的值到作用域上的userName和userAge。同时,我们通过设置required属性,来要求用户必须输入信息。如果用户没有输入,或者输入的信息不符合验证规则,相应的ng-invalid...

    AngularJS手动表单验证

    在这个例子中,`ng-submit`指令用于在表单提交时调用控制器中的`onSubmit`函数,传入`theForm.$valid`作为参数,该参数表示表单的整体有效性。`$valid`属性会根据表单中所有字段的验证状态自动计算。 接下来,我们...

    angularjs2 form和依赖注入

    这里,`[(ngModel)]`实现了双向数据绑定,`required`是表单验证的一部分,`[disabled]`根据表单的有效性禁用提交按钮。 2. **响应式表单**: 响应式表单更灵活,它基于RxJS库,允许在组件类中创建和操作表单模型...

    浅谈angular表单提交中ng-submit的默认使用方法

    在Angular开发中,表单提交是一个常见的操作,而`ng-submit`是AngularJS提供的一个指令,用于处理表单的提交事件。本文将深入探讨`ng-submit`的默认使用方法及其在实际应用中的注意事项。 首先,让我们看看如何在...

    angularjs 文件上传

    首先,理解AngularJS中的表单处理是至关重要的。在AngularJS中,`ng-model`指令用于将表单字段与控制器的属性绑定,`ng-change`则可以在值改变时触发函数。在文件上传场景中,`&lt;input type="file"&gt;`元素可以用来选择...

    Angularjs 开发实例

    `ngModel`指令将表单控件与模型数据绑定,`ngSubmit`则用于捕获表单提交事件。 在"AngularJS范例"这个压缩包中,可能包含了各种示例代码,演示了上述概念的实际应用。开发者可以通过这些例子学习如何使用AngularJS...

    AngularJS实现注册表单验证功能

    #### 三、AngularJS表单验证的基本概念 在AngularJS中,表单验证主要是通过控制器和HTML表单元素的交互来完成的。AngularJS提供了多种内置的验证指令,如`ng-required`, `ng-minlength`, `ng-maxlength`, `ng-...

    使用mvc无刷新提交

    在IT行业中,MVC(Model-View-Controller)架构模式是一种常见的软件设计模式,尤其在Web应用开发...在实际项目中,还可以结合前端框架如AngularJS、Vue.js或React.js,以及库如axios,进一步提升开发效率和应用性能。

    angularJS:一些angularJS片段

    `ngForm` 和 `ngModel` 可以用来创建和管理表单,`ngSubmit` 用于监听表单提交事件。 ```html ()" novalidate&gt; &lt;button type="submit"&gt;Submit ``` 这个例子中,如果邮箱输入为空,表单将无法提交。 ### 过滤...

Global site tag (gtag.js) - Google Analytics