ajax实现无刷新获取数据javascript+jsp+serverlet

时间：2014-08-03 20:26:05 阅读：316 评论：0 收藏：0 [点我收藏+]

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>

ajax实现无刷新获取数据javascript+jsp+serverlet,布布扣,bubuko.com

ajax实现无刷新获取数据javascript+jsp+serverlet

标签：style blog http color java os io 数据

原文地址：http://www.cnblogs.com/Small-Life/p/3888677.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行