jsp页面通过ajax获取后台serverlet传来的数据
serverlet页面代码
package com.shxt.lesson16homework.Servlets;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class SelStudent extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
try {
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3308/lingyun1", "root", "mysql");
Statement stmt = conn.createStatement();
ArrayList<Map<String, String>> aList = new ArrayList<Map<String, String>>();
ResultSet rs = stmt.executeQuery("select * from student");
ResultSetMetaData rsmd = rs.getMetaData();
String xx="["; //xx用于将结果集转化为json数据格式必须为[{"":"","":""},{"":"","":""},{"":"","":""}]
while (rs.next()) {
// Map<String, String> hmap = new HashMap<String, String>();
xx+="{";
for (int i = 1; i <= rsmd.getColumnCount(); i++) {
String key = rsmd.getColumnName(i);
xx+="\""+rsmd.getColumnName(i)+"\""+":"+"\""+rs.getString(key)+"\""+",";
//String value = rs.getString(key);
//hmap.put(key, value);
}
xx=xx.substring(0,xx.length()-1)+"},";
//aList.add(hmap);
}
xx=xx.substring(0,xx.length()-1);
xx+="]";
response.setContentType("text/html; charset=utf-8");
//String xx =aList.toString();
PrintWriter out = response.getWriter();
//xx = xx.substring(1, xx.length()-1);
System.out.println(xx); //将得到的数据输出
out.print(xx);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
jsp页面代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
function loadStudent() {
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (req.readyState == 4) {
var data = req.responseText;
//alert(data);
var myObj = eval(‘(‘+data+‘)‘); //其中data必须为json格式的数据格式如[{"":"","":""},{"":"","":""},{"":"","":""}] //不然eval函数会报错
alert(myObj.length);
for ( var i = 0; i < myObj.length; i++) {
var selObj = document.getElementById("bodyId");
var newTr = document.createElement("TR");
var newTd1 = document.createElement("TD");
newTd1.innerHTML = "<input type=‘radio‘ id=‘sf"+myObj[i].code+"‘ name=‘sfxz‘ value=‘" +myObj[i].code + "‘ />";
var newTd2 = document.createElement("TD");
newTd2.innerHTML = "<span align=‘center‘ id=‘dhh"+myObj[i].code+"‘>" + myObj[i].tele+ "<span>";
var newTd3 = document.createElement("TD");
newTd3.innerHTML = "<span align=‘center‘ id=‘jg"+myObj[i].code+"‘>"+ myObj[i].region + "<span>";
var newTd4 = document.createElement("TD");
newTd4.innerHTML = "<span align=‘center‘ id=‘xm"+myObj[i].code+"‘>" + myObj[i].name+ "<span>";
var newTd5 = document.createElement("TD");
newTd5.innerHTML = "<span align=‘center‘ id=‘xh"+myObj[i].code+"‘>" + myObj[i].code+ "<span>";
newTr.appendChild(newTd1);
newTr.appendChild(newTd5);
newTr.appendChild(newTd4);
newTr.appendChild(newTd3);
newTr.appendChild(newTd2);
selObj.appendChild(newTr);
}
}
};
req.open("post", "selStu", true);
req.send(null);
}
function updatestu()
{
var stuid="";
var rdsObj = document.getElementsByName("sfxz"); //一组对象
for (var i = 0; i < rdsObj.length; i++) {
if (rdsObj[i].checked == true) {
//alert(rdsObj[i].value + " 被选中");
stuid=rdsObj[i].value
}
}
var resultObj = window.showModalDialog("stuupdate.jsp", stuid); //产生模式对话框
document.getElementById("xh"+stuid).innerHTML = resultObj.code;
document.getElementById("xm"+stuid).innerHTML = resultObj.name;
document.getElementById("jg"+stuid).innerHTML = resultObj.region;
document.getElementById("dhh"+stuid).innerHTML = resultObj.tele;
}
function deletestu()
{
var stuid="";
var rdsObj = document.getElementsByName("sfxz"); //一组对象
for (var i = 0; i < rdsObj.length; i++) {
if (rdsObj[i].checked == true) {
//alert(rdsObj[i].value + " 被选中");
stuid=rdsObj[i].value
}
}
document.getElementById("xh"+stuid).innerHTML ="";
document.getElementById("xm"+stuid).innerHTML = "";
document.getElementById("jg"+stuid).innerHTML = "";
document.getElementById("dhh"+stuid).innerHTML = "";
//document.getElementById("sf"+stuid)
}
</script>
</head>
<body >
<table>
<thead>
<tr>
<td align="center" width="100px" height="100px">选择</td>
<td align="center" width="100px" height="100px">学号</td>
<td align="center" width="100px" height="100px">姓名</td>
<td align="center" width="100px" height="100px">籍贯</td>
<td align="center" width="200px" height="100px">电话</td>
</tr>
</thead>
<tbody id="bodyId">
</tbody>
<tfoot>
<input type="button" value="修改数据" onclick="updatestu()"/>
<input type="button" value="删除" onclick="deletestu()" />
</tfoot>
</table>
</body>
</html>
模式对话框中的jsp页面代码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
//【重点】：onload事件自动执行一个javascript代码，以获取到模态参数
function loadParam() {
//对话参数
var loadParamObj = window.dialogArguments; //parameter / properties / attribute
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (req.readyState == 4) {
var data = req.responseText;
//alert(data);
var myObj = eval(‘(‘+data+‘)‘);
document.getElementById("xm").value = myObj[0].name;
document.getElementById("xh").value = myObj[0].code;
document.getElementById("jg").value = myObj[0].region;
document.getElementById("dhh").value = myObj[0].tele;
}
};
req.open("post", "selStu?stuid="+loadParamObj, true);
req.send(null);
//alert(loadParamObj);
}
function updateInfo() {
//如何将信息返回给模态窗体的调用者
var reObj = new Object();
reObj.code = document.getElementById("xh").value;
reObj.name = document.getElementById("xm").value;
reObj.region =document.getElementById("jg").value;
reObj.tele =document.getElementById("dhh").value;
window.returnValue = reObj; //returnValues会将信息返回给模态窗体的调用者（打开模态的页面）
window.close(); //关闭当前的窗体
}
</script>
</head>
<body >
学号：<input id="xh" readonly="readonly"/><br />
姓名：<input id="xm" /><br />
籍贯<input id="jg" /><br />
电话号<input id="dhh" /><br />
<input type="button" value="修改" onclick="updateInfo()" />
</body>
</html>
ajax实现无刷新获取数据javascript+jsp+serverlet
时间： 2024-08-25 16:32:55