#一、总体说明

本例运行演示了用 Jersey 构建 RESTful 服务中,如何集成 jQuery,用html作为客户端访问 RESTful 服务。

#二、环境

  • 1.上文的项目RestDemo
  • 2.jQuery 库 ,本例为1.7.1版本 #三、配置 配置
    1. 创建 jQuery 客户端的项目结构,在WebContent创建js,css两个目录,并把jQuery 库 放入js目录下,并在该目录下创建main,js空文件
  1. 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>
  1. 修改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() 
			});
	}
  1. 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操作 CURD

PS:本案例力求简单把jquery访问 RESTful 服务展示出来,代码只在Chrome上做过测试。

本章源码https://github.com/waylau/RestDemo/tree/master/jersey-demo8-sqlserver-hibernate-spring3-jquery