JavaScript 调用 Servlet 实现前后端交互示例

作者:墨池时间:2026-10-23 00:45:41浏览:247

本文详细介绍如何使用 JavaScript 发起 AJAX 请求并调用后端 Servlet 处理数据。内容涵盖前端创建 XMLHttpRequest 对象、发送异步请求及处理响应状态,以及后端 Servlet 连接数据库、执行查询并将结果转换为 JSON 格式返回给前端的具体代码实现,旨在帮助开发者掌握基本的 Web 前后端通信流程。

JavaScript 调用 Servlet 实现前后端交互示例

本文通过一个具体实例,讲解如何利用 JavaScript 向 Servlet 发送请求。该方案可供读者参考学习。

以下是前端 JavaScript 代码的实现部分:


//创建ajax请求对象
var xmlHttp;
function createXMLHttpRequest(){
  if(window.ActiveXObject){
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if(window.XMLHttpRequest){
      xmlHttp = new XMLHttpRequest();
  }
}
/**
 * 表单提交
 */
function submit(){
  //发送请求
  var searchContent = $id("search_input").value;//查找内容
  createXMLHttpRequest();
  try{
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "/MyMap/QueryMapServlet?searchName="+searchContent, true);
    xmlHttp.send(null);
    }catch(exception){
    alert("您要访问的资源不存在!");
    }
  $("sideToggleRight").attr("checked","checked");//无作用
}
//处理结果
function handleStateChange(){
  if(xmlHttp.readyState == 4){
    if (xmlHttp.status == 200 || xmlHttp.status == 0){
      var t = xmlHttp.responseText;
        jsonobj = eval('('+t+')');
    }
  }
}

接着是后端 Servlet 端的处理逻辑:


//oracle数据库查询的结果:
Class.forName("oracle.jdbc.driver.OracleDriver");
conn = DriverManager.getConnection(url, "dio", "123");
stmt = conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.CONCUR_UPDATABLE);
rs = stmt.executeQuery("SELECT * FROM GEO where ST like '%"+searchName+"%'");
ResultSetMetaData metaData = rs.getMetaData();
rs.beforeFirst();//将指针移到最开始的位置
int columnCount = metaData.getColumnCount(); //列数
 JSONArray array = new JSONArray();
  while (rs.next()) {
   JSONObject jsonObj = new JSONObject();
    //输出数据
    for (int i = 1; i <= columnCount; i++) {
     String columnName = metaData.getColumnLabel(i);
     String value = rs.getString(columnName);
     jsonObj.put(columnName, value);
    }
     array.put(jsonObj);
    }
   System.out.println(array);
   response.getWriter().print(array);
}

如需了解更多 JavaScript 相关知识,建议查阅本站相关专题,包括《JavaScript中ajax操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》以及《JavaScript数学运算用法总结》。

希望上述内容对您的 JavaScript 编程实践有所帮助。

作者最新文章