servlet,jsp使用ajax进行数据交互

最新推荐文章于 2021-08-06 10:46:03 发布

IWantImagine

最新推荐文章于 2021-08-06 10:46:03 发布

阅读量718

点赞数

CC 4.0 BY-SA版权

分类专栏： java-web 文章标签： jsp

本文链接：https://blog.youkuaiyun.com/IWantImagine/article/details/78398626

java-web 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在网页中通过Ajax技术与Servlet和JSP进行数据交互，特别是在用户点击特定ID（如1）时，实现无刷新的数据更新。

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".getid").click(function(){
            var id = $(this).parent().parent().find(".id").text();//获取当前点击的所属的id
            alert(id);
            $.ajax({
                data:"post", //传输方式
                datatype:"text",//传输的数据类型
                url:"test",  //路径
                data:{
                    gettext:id//把所得到的id传给url是test的servlet
                },
                success:function(data,textStatus){
                    alert("查询成功!");//传输成功所要做的事情
                    //window.location.href = "/web/admin/detail/orderDetail.jsp";跳转页面
                }
            });
        })

    });
</script>
</head>
<body>
  <table>
    <tr>
        <th>id</th>
        <th>姓名</th>
        <th>电话</th>
        <th>年级</th>
    </tr>
    <tr>
        <td class="id" >1</td>
        <td>name</td>
        <td>18988658561</td>
        <td>高三</td>
        <td><button class="getid">查询</button></td>
    </tr>
    <tr>
        <td class="id">2</td>
        <td>大庆</td>
        <td>18988658561</td>
        <td>高二</td>
        <td><button class="getid">查询</button></td>
    </tr>

  </table>
</body>
</html>

这是servlet页面

public class TestAjax extends HttpServlet {

    private static final long serialVersionUID = -1522958472611476563L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String getId = request.getParameter("senId");
        System.out.println("在ajax拿到的值是:"+getId);
        //request.getRequestDispatcher("index.jsp");//页面转发，建议在ajax success那使用
    }
}

这里写图片描述
当我点击一个id为1的时候