js实验2.(4)AJAX的GET

来源：互联网发布：剑三捏脸数据不合法编辑：程序博客网时间：2024/06/08 09:36

实验要求：

用ajax-get技术(ajaxGet.html和get.jsp)实现以下功能：

(1)在下面画面中输入id：

(2) 离开id输入域后利用ajax-get技术调用get.jsp从stu表中取得num和name并显示出来，即alert(xmlhttp.responseText)，返回的格式见下图：

(3) 关闭弹出框后：

提示：

数据库：teaching 表：stu 字段:id,num,name

离开输入域的事件为blur，可以采用属性onblur触发。

ajaxGet.html代码：

<!DOCTYPE html><html><head>  <title>AJAX-get</title>  <style>     p {font-size:20px}   </style></head><body>  <h1>Ajax-get</h1>  <p>id：<input id="t1" type="text" onblur="r()"></p>  <p id="t2">[无]</p>  <script language="JavaScript" type="text/javascript">   var xmlhttp;   if(window.XMLHttpRequest){   xmlhttp=new XMLHttpRequest();//IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码   }else{   xmlhttp=new XMLHttpRequest("Microsoft.XMLHTTP");//IE6, IE5 浏览器执行代码   }   function r(){   var rr=a();   setTimeout(show,1);//1ms之后执行show()函数   }   function a(){   var t2=document.getElementById("t2");   t2.innerHTML="正在查询...";   }   function show(){   var t1=document.getElementById("t1");   var t2=document.getElementById("t2");   var msg="get.jsp?id="+t1.value;   xmlhttp.open("get",msg,false);// 打开http请求（ open）的参数： get或post， url，是否异步发送   xmlhttp.send(null);//发送http请求。 get只能用null作为参数   alert(xmlhttp.responseText); // http响应的正文   t2.innerHTML=xmlhttp.responseText;   }   </script></body></html>

get.jsp代码如下：

<%@ page  import="java.sql.*,java.awt.List"contentType="text/html; charset=utf-8" %><%!Connection conn;List data=new List();//储存id的listList data1=new List();//储存学号的listList data2=new List();//储存姓名的list//数据库的连接操作boolean connect() {String connectString = "jdbc:mysql://localhost:3306/teaching17"+ "?autoReconnect=true&useUnicode=true&characterEncoding=UTF-8&&useSSL=false";try {Class.forName("com.mysql.jdbc.Driver");conn = DriverManager.getConnection(connectString, "root", "0103");return true;} catch (Exception e) {System.out.println(e.getMessage());}return false;}//执行sql语句ResultSet executeQuery(String sqlSentence) {    Statement stat;    ResultSet rs = null;           try {stat = conn.createStatement();       //获取执行sql语句的对象rs = stat.executeQuery(sqlSentence); //执行sql查询，返回结果集    } catch (Exception e) {System.out.println(e.getMessage());    }    return rs;}int coun;//储存查询记录的条数，将其放置进对应的list里void showStudents(ResultSet rs){    try {       while(rs.next()){       coun=coun+1;          data.add(rs.getString("id").toString());          data1.add(rs.getString("num").toString());          data2.add(rs.getString("name").toString());       }    }    catch (Exception e) {System.out.println(e.getMessage());    }}%><%if(connect()){%><%coun=0;String ss="select * from stu where id="+request.getParameter("id")+";";ResultSet rs = executeQuery(ss);showStudents(rs);%><%if(coun==1){ %><%="id:"+data.getItem(0)+"</br>"%><%="num:"+data1.getItem(0)+"</br>"%><%="name:"+data2.getItem(0)+"</br>"%><%}else{%><%="null"%><%}data.clear();data1.clear();data2.clear();%><%} %>

不过目前发现了一个BUG：我在网页查询到id为5的信息之后，如果这时我更新了数据库，再次查询得到的并不是更新之后的数据库。还在进一步探究= =

0 0