JavaScript调用Java方法的实现路径:基于Servlet的交互方案
作者:百宝袋时间:2026-10-23 21:51:14浏览:160
本文介绍在JavaScript中调用Java方法的一种常见实现方式:通过前端发起请求至Servlet,再由Servlet转发至具体Java业务类。文章以电商购物车删除商品为例,展示了从HTML表格渲染、JavaScript事件监听、Servlet路由分发到Java DAO层执行数据库删除操作的完整流程,涵盖关键代码片段与逻辑说明。
JavaScript调用Java方法的架构思路
若需在JavaScript环境中执行Java代码,一种可行的架构是前端通过JavaScript发起网络请求访问Servlet,随后由该Servlet负责调用后端Java类中定义的具体业务方法。
前端HTML与JavaScript交互实现
以下是相关的HTML结构代码示例。
<table id="cartTable">
<thead>
<tr>
<th class="product_remove">
<label>
<input class="check-all check" type="checkbox"/> 全选
</label>
<a class="fl delete" id="deleteAll" href="javascript:;" rel="external nofollow" ><i class="fa fa-trash-o"></i></a>
</th>
<th class="product_thumb">图片</th>
<th class="product_name">名称</th>
<th class="product-price">价格</th>
<th class="product_quantity">款式</th>
</tr>
</thead>
<tbody>
<tr>
<td class="product_remove">
<input class="check-one check" type="checkbox"/>
</td>
<td class="product_thumb">
<a href="ShopShoesDetails.jsp?shoes_id=<%=shoes.getShoes_id() %>" rel="external nofollow" rel="external nofollow" >
<img src="${pageContext.request.contextPath}/ShopServlet?method=getShopsShoesImage&shoes_id=<%=shoes.getShoes_id() %>" alt="">
</a>
</td>
<td class="product_name">
<a href="ShopShoesDetails.jsp?shoes_id=<%=shoes.getShoes_id() %>" rel="external nofollow" rel="external nofollow" ><%=shoes.getBrand() %>/<%=shoes.getSeries() %>/<%=shoes.getName() %>
</a>
</td>
<td class="product-price"><%=shoes.getPrice() %></td>
<td class="product_quantity"><%=shoes.getSex() %>/<%=shoes.getSize() %></td>
</tr>
</tbody>
</table>
后端Servlet与Java DAO层处理
对应的Java数据访问对象(DAO)实现类ShopShoesDao.java。
public void deleteFromCart(String shoes_id) {
System.out.println("ShopShoesDao.deleteFromCart");
String[] shoes_ids = shoes_id.split(",");
Connection connection = DBUtil.getConnection();
PreparedStatement preparedStatement = null;
try {
for (String string : shoes_ids) {
int id = Integer.parseInt(string);
String sql = "delete from user_product_cart where shoes_id = ?";
preparedStatement = connection.prepareStatement(sql);
preparedStatement.setInt(1, id);
preparedStatement.executeUpdate();
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
DBUtil.close(preparedStatement);
DBUtil.close(connection);
}
}
负责处理HTTP请求的Servlet类ShopServlet.java。
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("service");
request.setCharacterEncoding("UTF-8");
String method=request.getParameter("method");
System.out.println(method);
if(method.equals("addProduct")) {
addProduct(request,response);
}else if(method.equals("getShopsShoesImage")) {
try {
getShopsShoesImage(request,response);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}else if(method.equals("addToCart")) {
try {
addToCart(request, response);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}else if(method.equals("deleteFromCart")) {
try {
deleteFromCart(request, response);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}else if(method.equals("payFromCart")) {
try {
payFromCart(request, response);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
private void deleteFromCart(HttpServletRequest request, HttpServletResponse response) throws IOException, SQLException {
// TODO Auto-generated method stub
System.out.println("deleteFromCart");
request.setCharacterEncoding("UTF-8");
int user_id= Integer.parseInt(request.getParameter("user_id"));
System.out.println(user_id);
String shoes_id = request.getParameter("shoes_id");
System.out.println(shoes_id);
ShopShoesDao shopShoesDao = new ShopShoesDao();
shopShoesDao.deleteFromCart(shoes_id);
request.getSession().setAttribute("shoes_id", shoes_id);
response.sendRedirect(request.getContextPath()+"/cart.jsp");
}
前端JavaScript核心逻辑代码。
// 点击全部删除
deleteAll.onclick = function () {
if (selectedTotal.innerHTML != 0) {
var con = confirm('确定删除所选商品吗?'); //弹出确认框
if (con) {
var shoes_id = '';
for (var i = 0; i < tr.length; i++) {
// 如果被选中,就删除相应的行
if (tr[i].getElementsByTagName('input')[0].checked) {
shoes_id = shoes_id + tr[i].cells[0].innerHTML + ',';
//tr[i].parentNode.removeChild(tr[i]); // 删除相应节点
//i--; //回退下标位置
}
}
alert(shoes_id);
window.location.href="ShopServlet?method=deleteFromCart&shoes_id=" rel="external nofollow" +shoes_id+"&user_id="+22;
alert("删除成功!");
}
} else {
alert('请选择商品!');
}
getTotal(); //更新总数
}
上述内容完整展示了JavaScript调用Java方法的具体实现细节,如需了解更多关于JS与Java交互的技术资料,建议参考本站其他相关文章。
作者最新文章
定制 Quill.js 主题样式:修改默认 CSS 与添加自定义类名
2026-11-04 11:21:35
混淆JS代码怎么在线反混淆并格式化阅读
2026-11-03 21:46:39
JS在线编辑器代码报错怎么调试?控制台使用技巧
2026-11-03 21:24:56
从 marked.js 旧版本升级到最新版:API 变更与迁移指南
2026-11-03 17:38:17
JS富文本编辑器Quill与代码编辑器CodeMirror的区别及应用场景
2026-11-03 16:52:09
