AngularJS如何实现表单提交-成都创新互联网站建设

成都创新互联网站制作

028-86922220

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

AngularJS如何实现表单提交

这篇文章将为大家详细讲解有关AngularJS如何实现表单提交，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联主营高青网站建设的网络公司,主营网站建设方案,重庆APP软件开发,高青h5小程序制作搭建,高青网站营销推广欢迎高青等地区企业咨询

具体如下：

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"%>






接口测试




 
 
 
 

  
认证接口：

  
  
     认证接口必填
   
   

 

  
数据请求接口：

  
  
     数据请求接口必填
   
 

 
  连接测试
 
 
{{ansInfo}}
 
   
    //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;    });   };  });      

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如何实现表单提交
当前网址：http://kswsj.cn/article/gesieo.html

其他资讯