add server side code

2014-02-01 11:10:46 +03:00
parent ea25492333
commit f2ffb1c3a7
14 changed files with 6487 additions and 0 deletions
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Java Servlet JSON</title>
+<script src="./js/jquery.1.9.1.min.js"></script>
+
+<!-- bootstrap just to have good looking page -->
+<link href="./bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" />
+
+<!-- we code these -->
+<script src="./js/myfunctions.js"></script>
+
+
+</head>
+
+<body>
+	<h1 style="text-align:center"><a href="http://hmkcode.com">HMKCode.com</a></h1>
+	<h1 style="text-align:center">Java Servlet that Receives POST Request with JSON Data<br></h1> 
+	
+	<div id="alert" class="alert alert-warning" style="width:200px;display:none">
+		<b>Warning!</b> Invalid input. 
+	</div>
+	<!-- article inputs -->
+	<div class="article" style="margin:10px;text-align:center">
+		<p>
+			<button class="btn btn-primary" type="button" onclick="getAjax()">Refresh</button>
+		</p>
+	</div>
+	
+	<!-- display all articles -->
+	<div style="width:700px;padding:20px">
+		<h5 style="text-align:center"><i style="color:#ccc"><small>Visitors</small></i></h5>
+		<table id="added-articles" class="table" >
+			<tr>
+				<th>Name</th>
+				<th>Country</th>
+				<th>Twitter</th>
+			</tr>
+		</table>
+	</div>
+</body> 
+</html>
@@ -0,0 +1,77 @@
+function sendAjax() {
+	$("#alert").css("display","none");
+	if($.trim($('#name').val()).length == 0){
+		$("#alert").css("display","block");
+		return;
+	}
+	// get inputs
+	var person = new Object();
+	person.name = $('#name').val();
+	person.country = $('#country').val();
+	person.twitter = $('#twitter').val();
+	
+	$.ajax({
+		url: "/jsonservlet",
+		type: 'POST',
+		dataType: 'json',
+		data: JSON.stringify(person),
+		contentType: 'application/json',
+		mimeType: 'application/json',
+		
+		success: function (data) {
+			$("tr:has(td)").remove();
+
+			$.each(data, function (index, person) {
+		    	
+		        if(person.name.length > 0 )		         
+		        $("#added-articles").append($('<tr/>')
+		        		.append($("<td/>").append($("<span class='label label-default' style='margin:4px;padding:4px'/>").text(person.name)))
+		        		.append($("<td/>").append($("<span class='label label-success' style='margin:4px;padding:4px'/>").text(person.country)))
+		        		.append($("<td/>").append($("<span class='label label-info' style='margin:4px;padding:4px'/>").text(person.twitter)))
+
+		        );
+		    
+		        
+		    }); 
+		},
+		error:function(data,status,er) {
+			alert("error: "+data+" status: "+status+" er:"+er);
+		}
+	});
+}
+//--------------------------------------
+function getAjax() {
+	 
+	$("#alert").css("display","none");
+
+	
+	$.ajax({
+		url: "/jsonservlet",
+		type: 'GET',
+		dataType: 'json',
+		contentType: 'application/json',
+		mimeType: 'application/json',
+		
+		success: function (data) {
+			$("tr:has(td)").remove();
+
+			$.each(data, function (index, person) {
+		    	
+		       
+		        $("#added-articles").append($('<tr/>')
+		        		.append($("<td/>").append($("<span class='label label-default' style='margin:4px;padding:4px'/>").text(person.name)))
+		        		.append($("<td/>").append($("<span class='label label-success' style='margin:4px;padding:4px'/>").text(person.country)))
+		        		.append($("<td/>").append($("<span class='label label-info' style='margin:4px;padding:4px'/>").text(person.twitter)))
+
+		        );
+		    
+		        
+		    }); 
+		},
+		error:function(data,status,er) {
+			alert("error: "+data+" status: "+status+" er:"+er);
+		}
+	});
+}
+
+//--------------------------------------