angular前后台通讯-笔记（1）

都是我挤几的笔记！

get请求数据

post提交数据

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../../css/bootstrap.min.css" />
<script type="text/javascript" src="../../../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../../../js/index.js"></script>
<script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../../js/angular.min.js"></script>
<style>
th {
text-align: center;
}

table {
text-align: center;
}
</style>
</head>

<body class="container-fluid" style="font-size:0.8rem; min-width: 1500px;" ng-app="myApp" ng-controller="querydatas">

<ul class="list-inline" style="margin-top: 30px;">

<li style="display: inline-block;float: left; padding: 2px; width: 90px;text-align:right; ">
合同信息
</li>

<li style="display: inline-block; padding: 2px; ">
<table class="table table-hover table-bordered " cellspacing="0" style="width: 1340px;border-radius: 10px;">
<tr>
<th>合同编号</th>
<th>合同类型</th>
<th>合同开始日期</th>
<th>合同结束日期</th>
<th>合同状态</th>
</tr>
<tr>
<td style="padding:0">
<input ng-model="compact_no_0" type="text" style="width: 100%;height:28px;border: 0;" />
</td>
<td style="padding:0">
<select ng-model="compact_type_0" type="text" style="width: 100%;height:28px;border: 0;" />
<option value="1">劳务合同</option>
<option value="2">劳动合同</option>
</select>
</td>
<td style="padding:0">
<input ng-model="compact_start_time_0" type="date" style="width: 100%;height:28px;border: 0;" />
</td>
<td style="padding:0">
<input ng-model="compact_end_time_0" type="date" style="width: 100%;height:28px;border: 0;" />
</td>
<td style="padding:0">
<select ng-model="compactStatus_0" type="text" style="width: 100%;height:28px;border: 0;">
<option value="1">当前</option>
<option value="2">历史</option>
</select>
</td>
</tr>

</table>
</li>

</ul>

<nav class="navbar navbar-default navbar-fixed-bottom" style="text-align: right;padding-right:180px; background-color: #FFFFFF;padding-top: 10px;float: right;">
<button class="btn btn-primary" style="margin: 0 30px;">导出</button>
<button class="btn btn-primary" ng-click="submitinput()">保存</button>
</nav>
</body>
<script>
var eeid = localStorage.getItem('localData');
var app = angular.module('myApp', []);

app.controller('querydatas', function($scope, $http) {

$scope.submitinput = function() {
/**
* 开始时间
*/
var startTime = new Date($scope.compact_start_time_0).getTime();// 将标准时间转为时间戳
console.log(startTime);
/**
* 将时间戳转换成日期格式 :yyyy-MM-dd
* getTime()--->精确到毫秒
* valueOf()--->精确到毫秒
* parse(date)--->只能精确到秒，毫秒将用0来代替
*/
//
var startDate = new Date(startTime);
Y = startDate.getFullYear() + '-';
M = (startDate.getMonth() + 1 < 10 ? '0' + (startDate.getMonth() + 1) : startDate.getMonth() + 1) + '-';
D = startDate.getDate() + ' ';
// h = date.getHours() + ':';
// m = date.getMinutes() + ':';
// s = date.getSeconds();
var startParam = Y + M + D;
console.log(startParam); //输出结果：2014-04-23

/**
* 结束时间
*/
var endTime = new Date($scope.compact_end_time_0).getTime();
console.log(endTime);
var endDate = new Date(endTime);
Y = endDate.getFullYear() + '-';
M = (endDate.getMonth() + 1 < 10 ? '0' + (endDate.getMonth() + 1) : endDate.getMonth() + 1) + '-';
D = endDate.getDate() + ' ';
// h = date.getHours() + ':';
// m = date.getMinutes() + ':';
// s = date.getSeconds();
var endParam = Y + M + D;
console.log(endParam);

$http({
method: 'POST',
url: 'http://10.1.8.80:8090/lydl_dcgj/compact/addCompt',
data: {
'eeid': eeid,
'compactNo': $scope.compact_no_0,
'compactType': $scope.compact_type_0,
'compactStartTime': startParam,
'compactEndTime': endParam,
'compactStatus': $scope.compactStatus_0
},

headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
transformRequest: function(obj) { //序列化一個对象
var str = [];
for(var s in obj) {
str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
//alert(typeof obj[s]);
}
return str.join("&");
}
}).then(function successCallback(response) {

console.log(response.$$success);
console.log("SUCCUSS!");
}, function errorCallback(response) {
// 请求失败执行代码
console.log("FAIL!");
});

};
});
</script>

</html>

angular前后台通讯-笔记（1）

猜你喜欢