ajax提交，擷取後台資料

最後更新：2017-07-31 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：example 取資料 radio pat ber 河北省 cfa and label

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

ajax提交，擷取後台資料

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More