ajax请求servlet小练习（一）

雨点打透心脏的1/2处 2022-02-02 05:43 206阅读 0赞

在我们以往的工作中，发送ajax都是借助框架（比如SpringMVC）来实现的，最近在做公司的一个需求，就是在一个工程中查询数据库，但是这个工程没有引入Spring相关的框架，我不想用form表单提交的方式去实现，就想写一个简单的servelt,发送ajax请求访问这个servlet,servlet再去访问数据库，之后将查询到的结果返回到页面。我将此工作分为了两部。

第一步，发送ajax请求到servlet并返回结果

第二步，在servlet中查询数据库。

这篇文章先简述如何在一个html页面中发送ajax请求到servlet并返回结果

首先使用idea工具新建一个纯的maven工程

一。新建一个servlet.并配置web.xml

这一步比较简单，我在之前的博客中有写，可以去查看。

[https://blog.csdn.net/liuying1802028915/article/details/85162021][https_blog.csdn.net_liuying1802028915_article_details_85162021]

下面直接贴上代码：

package com.taoj.demo.servlet;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.io.PrintWriter;
    
    public class QueryRoleServlet extends HttpServlet {
    
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
            PrintWriter out = response.getWriter();
            String name = request.getParameter("name").trim();
            String type = "-1";
            try {
                response.setCharacterEncoding("UTF-8");
                response.setContentType("application/json; charset=utf-8");
    //            out.println("Success---llll");
                out.append(type);
                out.close();
            } catch (Exception e){
                e.printStackTrace();
            }
        }
    
    }

下面是web.xml

<!DOCTYPE web-app PUBLIC
     "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
     "http://java.sun.com/dtd/web-app_2_3.dtd" >
    
    <web-app>
      <display-name>Archetype Created Web Application</display-name>
      
      <servlet>
        <servlet-name>HelloWorld</servlet-name>
        <servlet-class>com.taoj.demo.servlet.HelloServlet</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>HelloWorld</servlet-name>
        <url-pattern>/hello</url-pattern>
      </servlet-mapping>
      
      <servlet>
        <servlet-name>QueryRoleServlet</servlet-name>
        <servlet-class>com.taoj.demo.servlet.QueryRoleServlet</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>QueryRoleServlet</servlet-name>
        <url-pattern>/queryRole</url-pattern>
      </servlet-mapping>
    </web-app>

下面在一个简单的html页面中引入了jquery ,并写了一个简单的ajax请求，很简单，我这里直接贴一下代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ajax与servlet的练习</title>
        <script src="../js/jquery-1.10.2.min.js"></script>
    </head>
    <body>
        <div>
            我爱中国<br>
            <button id="btn">发送ajax</button>
        </div>
    </body>
    <script>
        $(function(){
            $("#btn").click(sendAjax);
        });
    
        function sendAjax(){
            var url = "http://127.0.0.1:8080/ser/queryRole";
            var name = "nb";
            alert("name:"+name+", url:"+url);
            var data = {
                name: name
            };
            $.ajax({
                type: "get",
                url: url,
                data: data,
                dataType: "json",
                success: function(result){
                    alert("success--result:"+result);
                },
                error: function(){
                    alert("error");
                }
    
            });
        }
    </script>
    </html>

点击按钮，就会发送ajax到queryRole的servlet,并返回一个结果。下一篇博文讲解如何在一个servlet中查询数据库。

不积跬步，无以至千里

不积小流，无以成江海

[https_blog.csdn.net_liuying1802028915_article_details_85162021]: https://blog.csdn.net/liuying1802028915/article/details/85162021