ajax提交，获取后台数据
<body>
<div class=" row" ng-app="myApp" ng-controller="myCtrl">
<ul class="content">
<li class="form-group">
<span class="sign">sign up</span>
</li>
<li class="form-group">
<label for="exampleInputNumber2"><span class="error"></span><span id="leftText">*姓名：</span></label>
<input type="text" class="form-control" id="name" placeholder="汉字" ng-model="form.name" maxlength="20">
</li>
<li class="form-group">
<label for="exampleInputNumber1"><span class="error"></span><span id="leftText">*用户名：</span></label>
<input type="text" class="form-control" id="userName" placeholder="三位以上的字符" ng-model="form.userName" maxlength="20">
</li>
<li class="form-group">
<label for="exampleInputNumber3"><span class="error"></span><span id="leftText">*手机号：</span></label>
<input type="text" class="form-control" id="phone" placeholder="number" required ng-model="form.phone" maxlength="20">
</li>
<li class="form-group">
<label for="exampleInputNumber4"><span class="error"></span><span id="leftText">*邮箱：</span></label>
<input type="text" class="form-control" id="email" placeholder="@qq.com" required ng-model="form.email" maxlength="20">
</li>
<!--<li class="form-group">
<label class="sex"><span id="leftText">性别：</span></label>
<input class="sex" checked name="sex" type="radio" value="女" ng-model="form.sex" />女
<input name="sex" type="radio" value="男" ng-model="form.sex" />男
</li>-->
<li class="address">
<label><span class="error"></span><span id="leftText">*地址：</span></label>
<select id="selProvince" ng-change="selPro()" ng-model="form.Province" ng-options="x.proID as x.proName for x in province">
<option value="">请选择省份</option>
</select>
<select id="selCit" ng-model="form.City" ng-options="x.cityID as x.cityName for x in selCity">
<option value="">请选择城市</option>
</select>
</li>
<li class="form-group">
<label for="exampleInputPassword1"><span class="error"></span><span id="leftText">*密码：</span></label>
<button id="btn" onclick="password()" title="s">s</button><input type="password" class="form-control" ng-model="form.password" id="password" placeholder="至少三位数字" maxlength="20">
</li>
<li class="form-group">
<label for="exampleInputFile"><span class="error"></span><span id="leftText">*确认密码：</span></label>
<button id="btn1" onclick="password1()" title="s">s</button><input type="password" class="form-control" id="absPassword" ng-model="form.passwordCha" placeholder="Password" onkeyup="validate()" maxlength="20">
<p id="passError"></p>
</li>
<li class="form-group">
<div style="margin-left:10%;">
<input type="button" value="验证" onclick="confirm()" />
<input type="text" id="input" ng-model="form.confirm" />
<input type="button" id="code" onclick="createCode()" />
</div>
</li>
<li class="checkbox form-group">
<label class="box">
<input type="checkbox"> 记住密码
</label>
</li>
<li class="form-group butn">
<input id="reset" type="button" value="重置" ng-click="reseat()" />
<input type="button" value="提交" ng-click="click()" />
</li>
<li>
<table >
<tr>
<td>姓名</td>
<td>用户名</td>
<td>手机号</td>
<td>邮箱</td>
<td>地址-省</td>
<td>地址-市</td>
<td>功能</td>
</tr>
<tr ng-repeat="t in userList" ng-cloak>
<td >{{t.NAME}}</td>
<td>{{t.USERNAME}}</td>
<td>{{t.TELPHONE}}</td>
<td>{{t.EMAIL}}</td>
<td>{{t.proName}}</td>
<td>{{t.citName}}</td>
<td><a href="javascript:void(0)" ng-click="edit($index)">修改</a>
<a href="javascript:void(0)" ng-click="delete(t.OID)">删除</a></td>
</tr>
</table>
</li>
</ul>
</div>
</body>
</html>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="js/JavaScript1.js" type="text/javascript"></script>
<script>
//定义应用
var app = angular.module('myApp', []);
//构造工厂类
app.factory('PublicFactory', ['$http', function ($http) {
var factory = {};
//获取数据方法
factory.GetList = function () {
return $http.get(GetAPiRootPath() + '/api/baseuserinfo/GetUserInfoByCreater?ct=json&creater=hnn', null);
}
//保存方法,删除方法同理
factory.PostUserInfoSave = function (model) {
return $http.post(GetAPiRootPath() + '/api/baseuserinfo/PostUserInfoSave?ct=json', { PostData: JSON.stringify(model) });
}
//删除
factory.PostUserInfoDelete = function (OID) {
return $http.post(GetAPiRootPath() + '/api/baseuserinfo/DeleteUserInfoSave?ct=json', { PostData: OID });
}
return factory;
}]);
//定义控制器
app.controller('myCtrl', ['$scope', 'PublicFactory', function ($scope, PublicFactory) { // BusinessService为工厂类的注入
$scope.userList = [];
$scope.form = {};
$scope.user = {};
$scope.province = [
{ "proID": 1, "proName": "河北省" },
{ "proID": 2, "proName": "湖南省" },
{ "proID": 3, "proName": "河南省" }];
$scope.city = [
{ "cityID": 1, "cityName": "石家庄", "proID": 1 },
{ "cityID": 2, "cityName": "长沙市", "proID": 2 },
{ "cityID": 3, "cityName": "郑州市", "proID": 3 },
{ "cityID": 4, "cityName": "南阳市", "proID": 3 },
{ "cityID": 5, "cityName": "驻马店市", "proID": 3 }];
var handleList = function (data) {
//console.log(data); //将内容输出到控制台上
//data = eval(data);
//去除双引号，把字符串转化为数组
$scope.userList = data;
//省
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < $scope.province.length; j++) {
if (data[i].PROVINCE == $scope.province[j].proID) {
data[i].proName = $scope.province[j].proName;
break;
}
}
for (var j = 0; j < $scope.city.length; j++) {
if (data[i].CITY == $scope.city[j].cityID) {
data[i].citName = $scope.city[j].cityName;
break;
}
}
}
}
PublicFactory.GetList().success(handleList);
//联动
$scope.selPro = function () {
$scope.selCity = [];
for (var i = 0; i < $scope.city.length; i++) {
if ($scope.city[i].proID == $scope.form.Province) {
$scope.selCity.push($scope.city[i]);
}
}
}
//方法
$scope.borde = function () {
$('#name').css({
'border': '1px solid #ccc',
});
$('#userName').css({
'border': '1px solid #ccc',
});
$('#absPassword').css({
'border': '1px solid #ccc',
});
$('#phone').css({
'border': '1px solid #ccc',
});
$('#email').css({
'border': '1px solid #ccc',
});
$('#password').css({
'border': '1px solid #ccc',
});
}
//提交
$scope.click = function () {
if ($scope.form.name != '' && $scope.form.userName != '' && $scope.form.phone != '' && $scope.form.email != '' && $scope.form.Province != '' && $scope.form.password != '' && $scope.form.City != '') {
PublicFactory.GetList().success(handleList);
var json = {
OID: $scope.user.OID,
NAME: $scope.form.name,
USERNAME: $scope.form.userName,
TELPHONE: $scope.form.phone,
EMAIL: $scope.form.email,
PROVINCE: $scope.form.Province,
CITY: $scope.form.City,
PASSWORD: $scope.form.password,
CREATER: 'hnn'
};
PublicFactory.PostUserInfoSave(json);
//PublicFactory.PostUserInfoSave($scope.form);
PublicFactory.GetList().success(handleList);
$scope.form = {};
$scope.borde();
}
}
//重置
$scope.reseat = function () {
$scope.form = {};
$scope.borde();
}
//修改
PublicFactory.GetList().success(handleList);
$scope.edit = function (index) {
// debugger
//userList数组，user对象
$scope.user = $scope.userList[index];
$scope.form.name = $scope.user.NAME;
$scope.form.userName = $scope.user.USERNAME;
$scope.form.phone = $scope.user.TELPHONE;
$scope.form.email = $scope.user.EMAIL;
$scope.form.Province = Number($scope.user.PROVINCE);
$scope.form.City =Number( $scope.user.CITY);
$scope.form.password = $scope.user.PASSWORD;
$scope.selPro();
}
//删除
$scope.delete = function (OID) {
PublicFactory.GetList().success(handleList);
PublicFactory.PostUserInfoDelete(OID);
PublicFactory.GetList().success(handleList);
}
}]);
//获取当前主机地址的方法
var GetAPiRootPath = function () {
//获取当前网址，如： http://localhost:8080/ems/Pages/Basic/Person.js
var curWwwPath = window.document.location.href;
//获取主机地址之后的目录，如： /ems/Pages/Basic/Person.js
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
//获取主机地址，如： http://localhost:8080
var localhostPath = curWwwPath.substring(0, pos);
return localhostPath;
};
</script>
