`

json的使用

    博客分类：
  • ajax
 
阅读更多
注意：要将json的相关类和json.js事先放到相关目录下面

1.AddUser.java
  
package com.servlet;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONObject;

public class AddUser extends HttpServlet{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		StringBuffer json = new StringBuffer();
		String line = null;
		BufferedReader reader = request.getReader();
		while((line = reader.readLine())!=null){
			line = new String(line.getBytes("ISO8859-1"),"utf-8");
			json.append(line);
		}
		JSONObject jsonObject = null;
		try{
			jsonObject = new JSONObject(json.toString());
		}catch(Exception e){
			e.printStackTrace();
		}
		String username = null;
		String password = null;
		String department = null;
		String headship = null;
		String sex = null;
		String old = null;
		try{
			username = jsonObject.getString("username").toUpperCase();
			password = jsonObject.getString("password");
			department = jsonObject.getString("department");
			headship = jsonObject.getString("headship");
			sex = jsonObject.getString("sex");
			old = jsonObject.getString("old")+"岁";
			if(sex.equals("1")){
				username = username+"先生";
				sex = "男";
			}else{
				username = username+"女士";
				sex = "女";
			}
			jsonObject.put("username", username);
			jsonObject.put("password", password);
			jsonObject.put("department", department);
			jsonObject.put("headship", headship);
			jsonObject.put("sex", sex);
			jsonObject.put("old", old);
			
		}catch(Exception e){
			e.printStackTrace();
		}
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		out.println(jsonObject.toString());
		out.flush();
		out.close();
	}
}


2.index.html
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>index.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="json.js">
</script>

		<script type="text/javascript">
var xmlhttp;
function createXmlHttpResquest() {
	if (window.ActiveXObject) {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	} else if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	}
}
function addNew() {
	var username = document.getElementById("username").value;
	var password = document.getElementById("password").value;
	var department = document.getElementById("department").value;
	var headship = document.getElementById("headship").value;
	var sex = document.getElementById("sex").value;
	var old = document.getElementById("old").value;

	if (username == "") {
		window.alert("请输入姓名！");
		return;
	}
	if (password == "") {
		window.alert("请输入密码！");
		return;
	}
	if (department == "") {
		window.alert("请输入部门！");
		return;
	}
	if (headship == "") {
		window.alert("请输入职务！");
		return;
	}
	if (old == "") {
		window.alert("请输入年龄！");
		return;
	}

	var newUser = new User(username, password, department, headship, sex, old);
	var userAsJSON = JSON.stringify(newUser);
	createXmlHttpResquest();
	xmlhttp.open("GET", "addUser", true);
	xmlhttp.onreadystatechange = processor;
	xmlhttp.send(userAsJSON);
}

function processor() {
	if (xmlhttp.readyState == 4) {
		if (xmlhttp.status == 200) {
			var user = JSON.parse(xmlhttp.responseText);
			var username = user.username;
			var password = user.password;
			var department = user.department;
			var headship = user.headship;
			var sex = user.sex;
			var old = user.old;
			updateTable(username, password, department, headship, sex, old);
		}
	}
}

function User(username, password, department, headship, sex, old) {
	this.username = username;
	this.password = password;
	this.department = department;
	this.headship = headship;
	this.sex = sex;
	this.old = old;
}

function updateTable(username, password, department, headship, sex, old) {
	document.all.userTable.insertRow(-1);
	var rows = document.all.userTable.rows.length;
	document.all.userTable.rows[rows - 1].bgcolor = "#ffffff";
	document.all.userTable.rows[rows - 1].align = "center";
	//在插入的一行中插入六列
	document.all.userTable.rows[rows - 1].insertCell(-1);
	document.all.userTable.rows[rows - 1].insertCell(-1);
	document.all.userTable.rows[rows - 1].insertCell(-1);
	document.all.userTable.rows[rows - 1].insertCell(-1);
	document.all.userTable.rows[rows - 1].insertCell(-1);
	document.all.userTable.rows[rows - 1].insertCell(-1);

	document.all.userTable.rows[rows - 1].cells[0].innerText = username;
	document.all.userTable.rows[rows - 1].cells[1].innerText = password;
	document.all.userTable.rows[rows - 1].cells[2].innerText = department;
	document.all.userTable.rows[rows - 1].cells[3].innerText = headship;
	document.all.userTable.rows[rows - 1].cells[4].innerText = sex;
	document.all.userTable.rows[rows - 1].cells[5].innerText = old;
}
</script>
	</head>

	<body>
		<h2>
			AJAX+JSON示例
		</h2>
		<hr>
		姓名：
		<input name="userName" id="username" type="text">
		<br>
		密码：
		<input name="password" id="password" type="text">
		<br>
		部门：
		<input name="department" id="department" type="text">
		<br>
		职务：
		<input name="headship" id="headship" type="text">
		<br>
		性别：
		<SELECT id="sex">
			<option value="1">
				男
			</option>
			<option value="2">
				女
			</option>
		</SELECT>
		<br>
		年龄：
		<input name="old" id="old" type="text">
		<br>
		<input type="button" name="btn" value="新增用户" onClick="addNew()">
		<br>
		<br>
		<TABLE id="userTable" border="1" width="500px" bgcolor="#eeeeee">
			<TR>
				<TD align="center">
					姓名
				</TD>
				<TD align="center">
					密码
				</TD>
				<TD align="center">
					部门
				</TD>
				<TD align="center">
					职务
				</TD>
				<TD align="center">
					性别
				</TD>
				<TD align="center">
					年龄
				</TD>
			</TR>
		</TABLE>
	</body>
</html>


3.web.xml
  
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>

	<servlet>
		<servlet-name>addUser</servlet-name>
		<servlet-class>com.servlet.AddUser</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>addUser</servlet-name>
		<url-pattern>/addUser</url-pattern>
	</servlet-mapping>
</web-app>


分享到：
| jsonrpc的使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics