Angular JS实现表单提交（json格式数据）

Angular的特点即为数据绑定，利用angular这一特点，可以减少传统表单提交获取表单数据繁琐的dom操作。

方法：给form里的每个表单控件绑定angular对象：使用ng-model

 <form name="envForm" novalidate>
                <div >
                    <div class="row">
                         <div class="col-xs-offset-1 col-xs-4">
                             <div class="form-group" ng-class="error.newItem.environmentName?'':'has-error'">
                                 <label class="control-label">环境名称
                                     <input type="text" class="form-control" ng-model="env.newItem.environmentName" ></label>
                             </div>
                         </div>

                         <div class="col-xs-offset-2 col-xs-4" style="height:74px">
                         		
                         	<div class="form-group">
                                <label class="control-label">项目名称
	                                    <div class="dropdown" style="height:33px">
						                    <input class="btn btn-default dropdown-toggle" ng-model="env.newItem.projectKey" 
						                            id="newPageDropdownMenu" data-toggle="dropdown" aria-haspopup="true"
						                            aria-expanded="true" style="width: 270px" readonly/>
						                     <span class="caret" style="margin-left: 247px;margin-top: -55px"></span>
						                    <ul class="dropdown-menu" aria-labelledby="newPageDropdownMenu">
						                    	<li ng-repeat="x in configs"><a href="javascript:void(0)" ng-click="selectAndFill(x.constName)">{{x.constName}}</a></li>
						                    </ul>
					              		 </div>
                                  </label>

                             </div>
                         </div>
                   </div>
                   
				   <div class="row">
                         <div class="col-xs-offset-1 col-xs-4">
                             <div class="form-group">
                                 <label>svn地址
                                     <input type="text" class="form-control" ng-model="env.newItem.svnAddress" id="svnAddress" name="svnAddress"></label>
                             </div>
                         </div>

                         <div class="col-xs-offset-2 col-xs-4">
                             <div class="form-group">
                                 <label>入口地址
                                     <input type="text" class="form-control" ng-model="env.newItem.entryAddress" id="entryAddress" name="entryAddress" ></label>
                             </div>
                         </div>
                   </div>
                   
                    <div class="row">
                    	<div class="col-xs-offset-1 col-xs-4">
                                <div class="form-group">
                                    <label>运行jdk
                                        <input type="text" class="form-control" ng-model="env.newItem.jdkVersion" id="jdkVersion" name="jdkVersion"></label>
                                </div>
                            </div>
                            <div class="col-xs-offset-2 col-xs-4">
                                <div class="form-group">
                                    <label>数据库地址
                                        <input type="text" class="form-control" ng-model="env.newItem.dbAddress" id="dbAddress" name="dbAddress"></label>
                                </div>
                            </div>
                    </div>
					<div class="row">
						 <div class="col-xs-offset-1 col-xs-4">
                                <div class="form-group">
                                    <label>容器版本
                                        <input type="text" class="form-control" ng-model="env.newItem.containerVersion" id="containerVersion" name="containerVersion"></label>
                                </div>
                          </div>
						   
                            <div class=" col-xs-offset-2 col-xs-4">
                                <div class="form-group">
                                    <label>debug端口号
                                        <input type="text" class="form-control" ng-model="env.newItem.debugPortId" id="debugPortId" name="debugPortId"></label>
                                </div>
                            </div>
					</div>
                            
                    <div class="row">
                    	 <div class="col-xs-offset-1 col-xs-4">
                                <div class="form-group">
                                    <label>Profile端口号
                                        <input type="text" class="form-control" ng-model="env.newItem.profilePort" id="profilePort" name="profilePort"></label>
                                </div>
                            </div>
                            
						 <div class="col-xs-offset-2 col-xs-4">
                                <div class="form-group">
                                    <label>run端口号
                                        <input type="text" class="form-control" ng-model="env.newItem.runPort" id="runPort" name="runPort" ></label>
                                </div>
                          </div>
						
                            
                    </div>
                     
                      <div class="row">

                         <div class="col-xs-offset-1 col-xs-4">
                                <div class="form-group">
                                    <label>jvm参数
                                        <input type="text" class="form-control" ng-model="env.newItem.jvmParams" id="jvmParams" name="jvmParams" placeholder="-xms,-xmx,年轻代，持久代"></label>
                                </div>
                         </div>
                    </div>   
                        
                    </div>
                
                </form>

然后在js代码里将其初始化：

var myApp=angular.module("App",[]);
	    myApp.controller('pannelCtrl',['$scope',"$http",function ($scope,$http) {

        $scope.env={
	    		newItem:{
	    			environmentName:'',// 环境名
	    			projectKey:'----请选择----',// 所属项目
	    			containerVersion:'',// 容器版本
	    			debugPortId:'',
	    			jdkVersion:'',
	    			entryAddress:'',
	    			dbAddress:'',
	    			jvmParams:'',
	    			profilePort:'',
	    			runPort:'',
	    			svnAddress:''
	    	}}
}])// ng-module 结束标签

在提交表单的点击事件里添加如下代码：使用ajax请求传输json数据

$.ajax({
	url : 'saveEnv',
	type : "POST",
	data :$scope.env.newItem,
	dataType : "JSON",
        success : function(data) {
	    //do something....				
	 });