在JSP中使用AJAX查询数据库数据可以通过以下步骤实现:
- 引入jQuery库和jquery.easyui.min.js库并放置在<head>标签中。
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-easyui/1.8.8/jquery.easyui.min.js"></script>
- 编写前端代码,在页面中增加一个按钮和一个表格用于展示查询结果。
<input type="button" value="查询" onclick="ajaxQuery()">
<table id="result"></table>
- 编写javascript代码,使用AJAX请求后台数据。
<script>
function ajaxQuery() {
$.ajax({
url: "query.jsp", // 后台查询数据的地址
type: "post", // 发送请求的方式
dataType: "json", // 返回数据的格式(JSON)
success: function (result) { // 成功回调函数
$("#result").datagrid({ // 表格组件方法
columns: [[ // 表格表头
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '姓名', width: 80},
{field: 'age', title: '年龄', width: 80}
]],
data: result // 表格数据
});
}
});
}
</script>
- 在后台编写查询数据的JSP页面(query.jsp)。
<%
// 连接数据库
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "123456");
// 查询数据
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM student");
// 构造JSON格式的数据
JSONArray jsonArray = new JSONArray();
while (rs.next()) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("id", rs.getString("id"));
jsonObject.put("name", rs.getString("name"));
jsonObject.put("age", rs.getInt("age"));
jsonArray.add(jsonObject);
}
String result = jsonArray.toString();
// 关闭连接
rs.close();
stmt.close();
conn.close();
out.print(result); // 返回JSON格式的数据
%>
以上代码基本实现了使用AJAX查询JSP数据库数据库数据的功能。需要注意的是,为了避免SQL注入等安全问题,不应该直接将前端传递的参数拼接到SQL语句中,而应该使用PreparedStatement等安全的方式构造SQL语句。
您好,要使用Ajax查询JSP数据库数据,您需要以下步骤:
- 创建一个JSP页面,用于处理您要查询的数据,例如getData.jsp。
- 在getData.jsp中编写Java代码,使用JDBC连接数据库并查询数据。将查询结果按照JSON格式进行封装:
<%@ page import="java.sql.*" %>
<%@ page import="net.sf.json.*" %>
<%
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
try{
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","password");
String sql = "SELECT * FROM your_table";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
JSONArray jsonArray = new JSONArray();
while(rs.next()){
JSONObject jsonObject = new JSONObject();
jsonObject.put("col1", rs.getString("col1"));
jsonObject.put("col2", rs.getString("col2"));
// 将其他需要查询的列依次放入jsonObject中
jsonArray.add(jsonObject);
}
out.println(jsonArray.toString());
}catch(Exception e){
e.printStackTrace();
}finally{
try{rs.close();}catch(Exception e){e.printStackTrace();}
try{ps.close();}catch(Exception e){e.printStackTrace();}
try{conn.close();}catch(Exception e){e.printStackTrace();}
}
%>
- 创建一个前端html页面,例如index.html,并在其中使用Ajax发起请求:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax查询JSP数据库数据</title>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<!-- 其他需要查询的列 -->
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
<script>
$.ajax({
type: "get",
url: "getData.jsp",
dataType: "json",
success: function(data){
$.each(data,function(i,item){
var content = "<tr><td>"+item.col1+"</td><td>"+item.col2+"</td><!--其他需要查询的列--></tr>";
$("#data").append(content);
});
},
error: function(msg){
console.log(msg);
}
});
</script>
</body>
</html>
其中,getData.jsp返回的数据为JSON格式的字符串,然后使用jQuery遍历JSON数组,将查询结果添加到html表格中。
发布者:luotuoemo,转转请注明出处:https://www.jintuiyun.com/157043.html