js实验2.(4)AJAX的GET

最新推荐文章于 2022-05-10 11:30:22 发布

清楼小刘

最新推荐文章于 2022-05-10 11:30:22 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qq_33826977/article/details/70216701

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

实验要求：

用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" οnblur="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的list
List data1=new List();//储存学号的list
List 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

收藏

觉得还不错? 一键收藏
0
评论
js实验2.(4)AJAX的GET

实验要求：用ajax-get技术(ajaxGet.html和get.jsp)实现以下功能： (1)在下面画面中输入id： (2) 离开id输入域后利用ajax-get技术调用get.jsp从stu表中取得num和name并显示出来，即alert(xmlhttp.responseText)，返回的格式见下图： (3) 关闭弹出框后：提
复制链接

扫一扫

专栏目录