首页 > 代码库 > ajax实现无刷新获取数据javascript+jsp+serverlet
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 = http://www.mamicode.com/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=http://www.mamicode.com/‘" +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 onl oad="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="http://www.mamicode.com/修改数据" onclick="updatestu()"/> <input type="button" value="http://www.mamicode.com/删除" 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 = http://www.mamicode.com/myObj[0].name; document.getElementById("xh").value = http://www.mamicode.com/myObj[0].code; document.getElementById("jg").value = http://www.mamicode.com/myObj[0].region; document.getElementById("dhh").value = http://www.mamicode.com/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 onl oad="loadParam()">学号：<input id="xh" readonly="readonly"/><br />姓名：<input id="xm" /><br />籍贯<input id="jg" /><br />电话号<input id="dhh" /><br /><input type="button" value="http://www.mamicode.com/修改" onclick="updateInfo()" /></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。