ajax实现无刷新获取数据javascript+jsp+serverlet
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 onload="loadStudent()"> <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 onload="loadParam()"> 学号：<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>
