SSH+Ajax（XMLHttpRequest实现）涉及json

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

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

@H_403_6@<!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" onchange="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","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;
}

完成！

原文链接：https://www.f2er.com/ajax/164842.html

SSH+Ajax（XMLHttpRequest实现）涉及json

猜你在找的Ajax相关文章