SSH+Ajax（XMLHttpRequest实现）涉及json

最新推荐文章于 2017-06-23 16:46:00 发布

浅笑黄花伊人泪

最新推荐文章于 2017-06-23 16:46:00 发布

阅读量1.4k

点赞数

分类专栏： SSH 文章标签： Ajax SSH JSON xmlhttprequest

本文链接：https://blog.csdn.net/a550246215/article/details/28424329

版权

SSH 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

后台为SSH，前台用纯JS实现Ajax（XMLHttpRequest方式）

目的：选择下拉框选项，下面的表单以ajax方式对应显示

前台代码：

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title> 使用JSON响应 </title>
	<style type="text/css">
		select {
			width:160px;
			font-size:11pt;
		}
	</style>
</head>
<body>
<select name="category" id="category" size="4"
	οnchange="change(this.value);">
	<option value="1" selected="selected">编程类</option>
	<option value="2">小说类</option>
	<option value="3">哲学类</option>
</select>
<table border="1" style="border-collapse:collapse;width:600px">
	<thead>
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>密码</th>
			<th>电话号码</th>
		</tr>
	</thead>
	<tbody id="book">
	</tbody>
</table>
<script type="text/javascript">
// 定义了XMLHttpRequest对象
var xmlrequest;
// 完成XMLHttpRequest对象的初始化
function createXMLHttpRequest()
{
	if(window.XMLHttpRequest)
	{ 
		// DOM 2浏览器
		xmlrequest = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		// IE浏览器
		try
		{
			xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			try
			{
				xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e)
			{
			}
		}
	}
}
// 事件处理函数，当下拉列表选择改变时，触发该事件
function change(id)
{
	// 初始化XMLHttpRequest对象
	createXMLHttpRequest();
	// 设置请求响应的URL
	var uri = "viewstudent2.action";
	// 设置处理响应的回调函数
	xmlrequest.onreadystatechange = processResponse;
	// 设置以POST方式发送请求，并打开连接
	xmlrequest.open("POST", uri, true); 
	// 设置POST请求的请求头
	xmlrequest.setRequestHeader("Content-Type"
		, "application/x-www-form-urlencoded");
	// 发送请求
	xmlrequest.send("cc="+id);
}
// 定义处理响应的回调函数
function processResponse()
{
	// 响应完成且响应正常
	if (xmlrequest.readyState == 4)
	{
		if (xmlrequest.status == 200)
		{
			var bookTb = document.getElementById("book");
			// 删除bookTb原有的所有行
			while(bookTb.rows.length > 0)
			{
				bookTb.deleteRow(bookTb.rows.length - 1);
			}
			// 获取服务器的JSON响应
			// 并调用eval()函数将服务器响应解析成JavaScript数组
			var bookss = JSON.parse(xmlrequest.responseText);
			var books=bookss.users;
			/* var books = eval(xmlrequest.responseText); */
			// 遍历数组，每个数组元素生成一个表格行
			for (var i = 0 , len = books.length ; i < len ; i++)
			{
				var tr = bookTb.insertRow(i);
				// 依次创建4个单元格，并为单元格设置内容
				var cell0 = tr.insertCell(0);
				cell0.innerHTML = books[i].stuid;
				var cell1 = tr.insertCell(1);
				cell1.innerHTML = books[i].stuname;
				var cell2 = tr.insertCell(2);
				cell2.innerHTML = books[i].qqnum;
				var cell3 = tr.insertCell(3);
				cell3.innerHTML = books[i].tel;
			}
		}
		else
		{
			//页面不正常
			window.alert("您所请求的页面有异常。");
		}
	}
}
</script>
</body>
</html>

后台的action

public String test()throws IOException , ServletException
	{
		 
		 ActionContext ac = ActionContext.getContext();
		 HttpServletRequest request=(HttpServletRequest)ac.get(ServletActionContext.HTTP_REQUEST); 
		 HttpServletResponse response 
		=(HttpServletResponse)ac.get(ServletActionContext.HTTP_RESPONSE); 
		 System.out.println(cc);
		 
		List<User> users=this.userService.findAll();
		int totalCount=users.size();
		JSONArray array=JSONArray.fromObject(users);
		
		if(cc.equals("2"))
		{
			
			
		}else
		{
			
		}
		
		Map<String,Object> maps=new HashMap<String,Object>();
		maps.put("users", array);
		maps.put("totalCount", totalCount);
		this.setAa(maps);
		System.out.println(maps);
		return SUCCESS;
	}

struts.xml配置：

	<!--Ajax测试方法-->

<package name="json" extends="json-default" namespace="/">
   					<action name="viewstudent2" class="Viewstudent" method="test">
   					<result name="success" type="json">
   						<param name="root">aa</param>
   					</result>
   					</action>

</package>

主要难点：前后台数据交互，前台解析JSON

ajax相关配置：浏览器的选择，服务器的响应网上有很多，上面的代码也有。

需要说明的是

// 事件处理函数，当下拉列表选择改变时，触发该事件
function change(id)
{
	// 初始化XMLHttpRequest对象
	createXMLHttpRequest();
	// 设置请求响应的URL
	var uri = "viewstudent2.action";
	// 设置处理响应的回调函数
	xmlrequest.onreadystatechange = processResponse;
	// 设置以POST方式发送请求，并打开连接，true代表异步传输
	xmlrequest.open("POST", uri, true); 
	// 设置POST请求的请求头
	xmlrequest.setRequestHeader("Content-Type"
		, "application/x-www-form-urlencoded");
	// 发送请求
	xmlrequest.send("cc="+id);
}

GET方法发送的时候可以用url+参数的形式，POST可以在send("参数")，post应该可以广泛，传入后台的参数为：

后台可以直接set方法注入就可以获得前台项目参数名字的值，不需要用httprequest，是否因为spring缘故，笔者暂时不知

String cc;
	
	public String getCc() {
		return cc;
	}
	public void setCc(String cc) {
		this.cc = cc;
	}

后台代码在上面将数据库取出的LIST集合转为json对象，前台用

var bookss = JSON.parse(xmlrequest.responseText);方式解析出来

前台得到的数据：

取出其中的users:

var books=bookss.users;

显示在html:

// 遍历数组，每个数组元素生成一个表格行
for (var i = 0 , len = books.length ; i < len ; i++)
{
var tr = bookTb.insertRow(i);
// 依次创建4个单元格，并为单元格设置内容
var cell0 = tr.insertCell(0);
cell0.innerHTML = books[i].stuid;
var cell1 = tr.insertCell(1);
cell1.innerHTML = books[i].stuname;
var cell2 = tr.insertCell(2);
cell2.innerHTML = books[i].qqnum;
var cell3 = tr.insertCell(3);
cell3.innerHTML = books[i].tel;
}