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

旧城等待， 2022-05-16 13:54 364阅读 0赞

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