mysql数据用json对象查询并且存入js数组

最新推荐文章于 2025-06-24 10:57:59 发布

遗忘那段殇

最新推荐文章于 2025-06-24 10:57:59 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaweb_js java_mysql 文章标签： java se mysql java web jstl javascript

本文链接：https://blog.youkuaiyun.com/six_666666/article/details/77677200

java_mysql 同时被 2 个专栏收录

12 篇文章

订阅专栏

javaweb_js

3 篇文章

订阅专栏

本文展示了如何在Java Web应用中通过XMLHttpRequest与Servlet进行交互，从MySQL数据库查询数据并将其转换为JSON对象。在JavaScript端，数据被解析并显示在页面上，同时存在一个将查询结果存储到数组并遍历展示的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境：mysql5.0.22、eclipse j2ee LUNA

先看mysql数据

配置input.jsp查询条件的jsp文件（并且反馈回的页面也是input.jsp文件、ay数组遍历出的结果）

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form id="myForm">
userName:<input type="text" name="id" /> <input type="button"
value="submit" id="btn">
</form>
<div >
<div id="show_name"></div>
<div id="show_age"></div>
<div id="show_addr"></div>
</div>

</body>
<script type="text/javascript">

var oBtn = document.getElementById("btn");
oBtn.onclick = function() {
var oInput = document.getElementsByTagName("input")[0];
var id = oInput.value;
//location.href = "/servletFrame/qc?id=" + id;

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var json = JSON.parse(xmlhttp.responseText);
document.getElementById("show_name").innerHTML = json.name;
document.getElementById("show_age").innerHTML = json.age;
document.getElementById("show_addr").innerHTML = json.addr;
}
var ay=[json.name,json.age,json.addr];
for(var i=0;i<ay.length;i++){

document.write(ay[i]+" ");
}
}
xmlhttp.open("GET", "/servletFrame/QcServlet?id=" + id, true);
xmlhttp.send();

}
/* oBtn.onclick = function(){
document.getElementById("myForm").submit();
} */
</script>
</html>

配置QcServlet.java文件（注解方式）

@WebServlet("/QcServlet")
public class QcServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
Map<String, Object> map = new Jdbc828().get(id);

request.setAttribute("list", map);
String json = JSON.toJSONString(map);
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.getWriter().write(json);

// request.getRequestDispatcher("/jsp/show.jsp")
// .forward(request, response);
}

}

配置数据库连接Jdbc.java

public class Jdbc828 {
// 声明Connection对象
java.sql.Connection con;
// 驱动程序名
String driver = "com.mysql.jdbc.Driver";
// URL指向要访问的数据库名mydata
String url = "jdbc:mysql://localhost:3306/zdy";
// MySQL配置时的用户名
String user = "root";
// MySQL配置时的密码
String password = "root";
// 结果集
java.sql.ResultSet rs;

java.sql.Statement statement=null;

public Map<String, Object> get(String userId) {
// 遍历查询结果集
try {
// 加载驱动程序
Class.forName(driver);
// 1.getConnection()方法，连接MySQL数据库！！
con = DriverManager.getConnection(url, user, password);
// 2.创建statement类对象，用来执行SQL语句！！
statement = con.createStatement();
// 要执行的SQL语句
String sql = "SELECT * FROM student WHERE idcard="+userId;
// 3.ResultSet类，用来存放获取的结果集！！
rs = statement.executeQuery(sql);
List<Map>list=new ArrayList<Map>();
Map<String, Object> m = null;
while (rs.next()) {
String idcard = rs.getString("idcard");
String name = rs.getString("name");
String age = rs.getString("age");
String gender = rs.getString("gender");
String addr = rs.getString("addr");
m = new HashMap<String, Object>();
m.put("idcard", idcard);
m.put("name", name);
m.put("age", age);
m.put("gender", gender);
m.put("addr", addr);
list.add(m);
}
return m;
} catch (Exception e) {
System.out.println("Sorry,can`t find the Driver!");
} finally {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
try {
statement.close();
} catch (SQLException e1) {
e1.printStackTrace();
}
try {
con.close();
} catch (SQLException e) {
e.printStackTrace();
}
}

return null;
}
}