利用ajax和JSP技术实现网页中表单的局部刷新(只刷新表单数据,
发布时间:2020-12-16 01:53:58 所属栏目:百科 来源:网络整理
导读:在web开发中有时有局部刷新的需求,这样做的好处是克服了页面整体刷新对网络速度受限的情况。 1.MySQL数据表如下(简单举例): 表名:stu_info stuId int PK NN stuName varchar(45) NN stuDesc varchar(45) 2.新建wk.jsp,代码如下: span style="color:#33
在web开发中有时有局部刷新的需求,这样做的好处是克服了页面整体刷新对网络速度受限的情况。
1.MySQL数据表如下(简单举例): 表名:stu_info stuId int PK NN stuName varchar(45) NN stuDesc varchar(45)
2.新建wk.jsp,代码如下: <span style="color:#330033;"><%@ page contentType="text/html; charset=utf-8" %> <head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> </head> <script language="javascript"> var XMLHttpReq; //创建XMLHttpRequest对象 function createXMLHttpRequest() { if(window.XMLHttpRequest) { //Mozilla 浏览器 XMLHttpReq = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE浏览器 try { XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } } //发送请求函数 function sendRequest() { createXMLHttpRequest(); var url = "ajax.jsp"; XMLHttpReq.open("GET",url,true); XMLHttpReq.onreadystatechange = processResponse;//指定响应函数 XMLHttpReq.send(null); // 发送请求 } // 处理返回信息函数 function processResponse() { if (XMLHttpReq.readyState == 4) { // 判断对象状态 if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息 DisplayHot(); setTimeout("sendRequest()",1000); } else { //页面不正常 window.alert("您所请求的页面有异常。"); } } } function DisplayHot() { var yan1 = XMLHttpReq.responseXML.getElementsByTagName("id"); var yan = XMLHttpReq.responseXML.getElementsByTagName("name"); var yan2 = XMLHttpReq.responseXML.getElementsByTagName("description"); var ta = ""; for(var i=0;i<yan.length;i++){ var id = yan1[i].firstChild.nodeValue; var name = yan[i].firstChild.nodeValue; var desc = yan2[i].firstChild.nodeValue; ta+="<tr align=left><td><table><td width=100>"+id+"</td><td width=200>"+name+"</td><td width=200>"+desc+"</td></table></td></tr>"; // document.getElementById(res).innerHTML = name; // res = res +i.toString(); } document.getElementById("res").innerHTML = ta; } </script> <body onload =sendRequest() > <table style="BORDER-COLLAPSE: collapse" borderColor=#222221 cellSpacing=0 cellPadding=0 width=400 bgColor=#f5efe7 border=0> <TR> <TD align=middle bgColor=#dbc2b0 height=19 colspan="3"><B>学生信息</B> </TD> </TR> <tr><td>学号</td><td>姓名</td><td>备注</td></tr> </table> <table border=1 width=400> <div id="res"></div> </table> </body> </table></span> 3.新建Conn.jsp,代码如下: <span style="color:#330033;"></pre><p><pre name="code" class="html"><%@ page contentType="text/html; charset=utf-8" import="java.sql.*,javax.naming.Context,javax.naming.InitialContext" errorPage=""%> <%!Connection conn = null; Statement stmt = null; ResultSet rs = null; public void jspInit() { try { Class.forName("com.mysql.jdbc.Driver"); //建立连接 conn = DriverManager.getConnection( "jdbc:mysql://192.168.1.106:3306/acsystem","ouyang","ouyang"); //if(conn!=null){ //System.out.println("connect success"); //} //Context initCtx = new InitialContext(); //Context ctx = (Context) initCtx.lookup("java:comp/env"); //获取连接池对象 //Object obj = (Object) ctx.lookup("jdbc/javasky"); //类型转换 //javax.sql.DataSource ds = (javax.sql.DataSource) obj; //conn = ds.getConnection(); stmt = conn.createStatement(); } catch (Exception ex) { System.out.println(ex.toString()); } } public void Exec(String sql) { jspInit(); try { stmt.executeUpdate(sql); } catch (Exception e) { System.out.print(e.toString()); } } public ResultSet getRs(String sql) throws SQLException { jspInit(); try { rs = stmt.executeQuery(sql); return rs; } catch (Exception e) { System.out.print(e); return null; } } public ResultSet executeQuery(String sql) throws Exception { jspInit(); try { sql = new String(sql.getBytes("GBK"),"utf-8"); stmt = conn.createStatement( java.sql.ResultSet.TYPE_SCROLL_INSENSITIVE,java.sql.ResultSet.CONCUR_READ_ONLY); rs = stmt.executeQuery(sql); } catch (SQLException ex) { System.out.println("sql.executeQuery:" + ex.getMessage()); } return rs; } public String getS(String Str) { try { byte b[] = Str.getBytes("ISO-8859-1"); Str = new String(b,"UTF-8"); } catch (Exception ee) { ee.printStackTrace(); } return Str; }%> </span> 4.新建ajax.jsp,代码如下: <span style="color:#330033;"><%@ page contentType="text/html; charset=utf-8" import="java.sql.*,java.util.*" errorPage="" %> <%@ include file="Conn.jsp" %> <% try{ ResultSet rs=getRs("select * from stu_info order by stuId asc"); StringBuffer content=new StringBuffer(""); response.setContentType("text/xml;charset=UTF-8"); response.setHeader("Cache-Control","no-cache"); //out.println("<?xml version="1.0" encoding="UTF-8" ?>"); out.println("<response>"); while(rs.next()){ String id=rs.getString("stuId"); int stuId = Integer.parseInt(id); String stuName=rs.getString("stuName"); String stuDesc=rs.getString("stuDesc"); System.out.println(stuId); //out.println("<content>"); out.println("<id>" +stuId+ "</id>"); out.println("<name>" +stuName+ "</name>"); out.println("<description>" +stuDesc+ "</description>"); //out.println("</content>"); } out.println("</response>"); out.close(); } catch(Exception e){ e.printStackTrace(); } %> </span> 5.把上述3个页面放在项目同一个文件夹下,运行wk.jsp 即可得到表单stu_info的数据。 (PS:这里为简单举例,样式什么的可以自行添加和修改。有错误欢迎指正。) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |