# 用Jersey構建RESTful服務8--Jersey+SQLServer+Hibernate4.3+Spring3.2+jquery
## 一、總體說明
本例運行演示了用 Jersey 構建 RESTful 服務中，如何集成 jQuery,用html作為客戶端訪問 RESTful 服務。
## 二、環境
1. 上文的項目RestDemo
2. jQuery 庫 ,本例為1.7.1版本
## 三、配置
1. 創建 jQuery 客戶端的項目結構，在`WebContent`創建`js`,`css`兩個目錄，并把jQuery 庫 放入`js`目錄下，并在該目錄下創建`main,js`空文件
2. 在`WebContent`創建`index.html`:
```
<!DOCTYPE HTML>
<html>
<head>
<title>jquery Demo (人員管理系統)</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="header">
<button id="btnClear">Clear</button>
<button id="btnRefreash">Refreash</button>
更多實例訪問：<a href="http://www.waylau.com" >www.waylau.com</a>
</div>
<div class="leftArea">
<ul id="userList"></ul>
</div>
<form id="wineForm">
<div class="mainArea">
<label>Id:</label> <input id="userId" name="userId" type="text" required/>
<label>Name:</label> <input type="text" id="userName" name="userName" required>
<label>Age:</label> <input type="text" id="age" name="age" required/>
<button id="btnAdd">Add</button>
<button id="btnSave">Save</button>
<button id="btnDelete">Delete</button>
</div>
</form>
</body>
</html>
```
3. 修改`main.js`
```
// The root URL for the RESTful services
var rootURL = 'http://localhost:8089/RestDemo/rest/users';
var currentUser;
// Retrieve wine list when application starts
findAll();
// Nothing to delete in initial application state
$('#btnDelete').hide();
$('#btnAdd').click(function() {
addUser();
return false;
});
$('#btnSave').click(function() {
updateUser();
return false;
});
$('#btnClear').click(function() {
newUser();
return false;
});
$('#btnDelete').click(function() {
deleteUser();
return false;
});
$('#userList a').live('click', function() {
findById($(this).data('identity'));
});
$('#btnRefreash').click(function() {
findAll();
return false;
});
function newUser() {
$('#btnDelete').hide();
currentUser = {};
renderDetails(currentUser); // Display empty form
}
function findAll() {
console.log('findAll');
$.ajax({
type: 'GET',
url: rootURL,
dataType: "json", // data type of response
success: renderList
});
}
function findById(id) {
console.log('findById: ' + id);
$.ajax({
type: 'GET',
url: rootURL + '/' + id,
dataType: "json",
success: function(data){
$('#btnDelete').show();
console.log('findById success: ' + data.userName);
currentUser = data;
renderDetails(currentUser);
}
});
}
function addUser() {
console.log('addUser');
$.ajax({
type: 'POST',
contentType: 'application/json',
url: rootURL,
dataType: "json",
data: formToJSON(),
success: function(data, textStatus, jqXHR){
alert('User created successfully');
$('#btnDelete').show();
$('#userId').val(data.userId);
},
error: function(jqXHR, textStatus, errorThrown){
alert('addUser error: ' + textStatus);
}
});
}
function updateUser() {
console.log('updateUser');
$.ajax({
type: 'PUT',
contentType: 'application/json',
url: rootURL,
dataType: "json",
data: formToJSON(),
success: function(data, textStatus, jqXHR){
alert('User updated successfully');
},
error: function(jqXHR, textStatus, errorThrown){
alert('updateUser error: ' + textStatus);
}
});
}
function deleteUser() {
console.log('deleteUser');
$.ajax({
type: 'DELETE',
url: rootURL + '/' + $('#userId').val(),
success: function(data, textStatus, jqXHR){
alert('user deleted successfully');
},
error: function(jqXHR, textStatus, errorThrown){
alert('delete user error');
}
});
}
function renderList(data) {
// JAX-RS serializes an empty list as null, and a 'collection of one' as an object (not an 'array of one')
var list = data == null ? [] : (data instanceof Array ? data : [data]);
$('#userList li').remove();
$.each(list, function(index, data) {
$('#userList').append('<li><a href="#" data-identity="' + data.userId + '">'+data.userName+'</a></li>');
});
}
function renderDetails(data) {
$('#userId').val(data.userId);
$('#userName').val(data.userName);
$('#age').val(data.age);
}
// Helper function to serialize all the form fields into a JSON string
function formToJSON() {
var userId = $('#userId').val();
return JSON.stringify({
"userId": userId == "" ? null : userId,
"userName": $('#userName').val(),
"age": $('#age').val()
});
}
```
4. 在`css`目錄下創建`styles.css`文件
```
* {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
}
.header {
padding-top: 5px;
}
.leftArea {
position: absolute;
left: 10px;
top: 70px;
bottom: 20px;
width: 260px;
border:solid 1px #CCCCCC;
overflow-y: scroll;
}
.mainArea {
position: absolute;
top: 70px;
bottom: 20px;
left:300px;
overflow-y: scroll;
width:300px;
}
.rightArea {
position: absolute;
top: 70px;
bottom: 20px;
left:650px;
overflow-y: scroll;
width:270px;
}
ul {
list-style-type: none;
padding-left: 0px;
margin-top: 0px;
}
li a {
text-decoration:none;
display: block;
color: #000000;
border-bottom:solid 1px #CCCCCC;
padding: 8px;
}
li a:hover {
background-color: #4B0A1E;
color: #BA8A92;
}
input, textarea {
border:1px solid #ccc;
min-height:30px;
outline: none;
}
.mainArea input {
margin-bottom:15px;
margin-top:5px;
width:280px;
}
textarea {
margin-bottom:15px;
margin-top:5px;
height: 200px;
width:250px;
}
label {
display:block;
}
button {
padding:6px;
}
#searchKey {
width:160px;
}
```
## 四、運行
1. 先運行項目
2. 可以進行CURD操作
_PS_:本案例力求簡單把jquery訪問 RESTful 服務展示出來，代碼只在Chrome上做過測試。
**本章源碼**：[https://github.com/waylau/RestDemo/tree/master/jersey-demo8-sqlserver-hibernate-spring3-jquery](https://github.com/waylau/RestDemo/tree/master/jersey-demo8-sqlserver-hibernate-spring3-jquery)
- 用Jersey構建RESTful服務
- 用Jersey構建RESTful服務1--HelloWorld
- 用Jersey構建RESTful服務2--JAVA對象轉成XML輸出
- 用Jersey構建RESTful服務3--JAVA對象轉成JSON輸出
- 用Jersey構建RESTful服務4--通過jersey-client客戶端調用Jersey的Web服務模擬CURD
- 用Jersey構建RESTful服務5--Jersey+MySQL5.6+Hibernate4.3
- 用Jersey構建RESTful服務6--Jersey+SQLServer+Hibernate4.3
- 用Jersey構建RESTful服務7--Jersey+SQLServer+Hibernate4.3+Spring3.2
- 用Jersey構建RESTful服務8--Jersey+SQLServer+Hibernate4.3+Spring3.2+jquery
- 用Jersey構建RESTful服務9--Jersey+SQLServer+Hibernate4.3+Spring3.2+AngularJS
- 用 Jersey 2 和 Spring 4 構建 RESTful web service