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....				
	 });