前后端交互异步请求查询_java websocket 实现前后端异步查询-优快云博客

该博客展示了如何使用Java Servlet处理前端POST请求，根据接收到的JSON参数查询数据库，并将结果以JSON形式返回到前端。内容包括设置响应编码、解析请求参数、执行SQL查询、将查询结果转换为HashMap列表并转化为JSON字符串。前端通过jQuery的$.post方法发送请求，接收到JSON数据后解析并显示在页面上。

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

response.getwriter().println()可以输出html类型的标签，还可以输出一个对象。
response.getwriter.write()也可以输出html类型的标签，但它不可以输出一个对象。

根据传递过来的参数查询想要的信息并且以一个List<HashMap>集合返回

package com.sky.controller;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.sky.utlis.JDBCUtil;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class QQQServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/text;charset=utf-8");
        response.setCharacterEncoding("UTF-8");
        String emp = request.getParameter("emp1");
        System.out.println("json串是："+emp);
        JSONObject emp11 = JSON.parseObject(emp);
        String empno = emp11.getString("empno");
        String ename = emp11.getString("ename");
        String deptno = emp11.getString("deptno");
        System.out.println(empno);
        System.out.println(ename);
        System.out.println(deptno);
        Connection conn = JDBCUtil.getConnection();
        String sql = "SELECT *\n" +
                "FROM emp\n" +
                "WHERE ename LIKE ? AND deptno=?";
        try {
        PreparedStatement pstmt = conn.prepareStatement(sql);
        pstmt.setString(1,"%"+ename+"%");
        pstmt.setString(2,deptno);
            ResultSet rs = pstmt.executeQuery();
            List<HashMap> list = new ArrayList<>();
            while (rs.next()) {
                HashMap map = new HashMap();
                String ename1 = rs.getString("ename");
                String job = rs.getString("job");
                String salary = rs.getString("salary");
                map.put("name",ename1);
                map.put("job",job);
                map.put("salary",salary);
                list.add(map);
            }
//            直接转化为json串传回前端页面即可
            String s = JSON.toJSONString(list);
//            JSONObject jsonObject = JSONObject.parseObject(s);
//            JSONArray objects = JSONArray.parseArray(s);
            response.getWriter().println(s);

        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

在html或者jsp中写回页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    　　
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
员工编号<input type="text" name="empno1" id="empno1" value="1"><br>
员工姓名<input type="text" name="ename1" id="ename1" value="y"><br>

员工部门<input type="text" name="deptno1" id="deptno1" value="10"><br>
<button id="btn1">查询</button>
<span id="spam1"></span>
<span id="spam2"></span>
<span id="spam3"></span>
<span id="spam4"></span>
<span id="spam5"></span>
<span id="spam6"></span>


<script>
    $("#btn1").click(function () {
        var empno1 = $("#empno1").val();
        var ename1 = $("#ename1").val();
        var deptno1 = $("#deptno1").val();
        var emp = {"empno": empno1, "ename": ename1, "deptno": deptno1};

        $.post("home", {"emp1": JSON.stringify(emp)}, function (result) {
            // $("#span1").html(result)
            alert(typeof result);
            var obj1 = eval(result);
            $("#spam1").html(obj1[0].name);
            $("#spam2").html(obj1[0].job);
            $("#spam3").html(obj1[0].salary);
            $("#spam4").html(obj1[1].name);
            $("#spam5").html(obj1[1].job);
            $("#spam6").html(obj1[1].salary);
        })
    })

</script>
</body>
</html>