使用jQuery提供的ajax函数实现局部刷新

原创于 2021-10-16 18:42:13 发布 · 742 阅读

CC 4.0 BY-SA版权

文章标签：

该博客介绍如何在不刷新整个页面的情况下，通过jQuery的ajax函数从后台获取数据并实现页面局部更新。首先，介绍了所需的jQuery库和Servlet设置。接着，展示了在index.jsp中导入jQuery库并创建一个简单的表单。然后，创建了一个名为one的Servlet来处理ajax请求，从后台获取JSON数据。最后，讲解了Servlet的doGet方法，如何根据前端传递的name参数构建JSON响应，并将特定内容显示在前端。

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

需求:在浏览器不跳转页面的条件下实现从后台获取数据并且局部刷新页面

需要的插件：

1.在 WEB-INF 目录下创建 lib 目录，拷贝 jar 文件

2.创建目录 js，拷贝 jQuery.js 文件

index.jsp

先导入js

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

随便加点东西

<body>
  <div>
    name:<input type="text" id="name"><br>
    <input id="btn" type="submit" value="submit"><br>
    <input id="data1" type="text" value="正在加载">
  </div>
  </body>

<script type="text/javascript">
      $(function () {//jQuery方法，当页面加载结束后执行这个方法
            $("#btn").click(function () {//jquery方法，为id="btn"的按钮绑定方法
              var name=$("#name").val();
              $.ajax({//发送ajax请求
                url:"one",//请求到达的资源
                data:{
                  "name":name//请求携带的参数
                },
                dataType:"json",//希望响应返回携带的参数格式
                success:function (resp) {//如果响应成功返回要执行的方法

                  $("#data1").val(resp.hello);
                }
              })
            })
      })

    </script>

创建一个servlet，映射为one，也就是上图ajax请求的地址

创建一个测试类，注意这里的构造方法，我们要做的就是在前台的name输入框中输入数据，点击按钮，获取从后台得到的json数据，并将其中的一部分内容（这里选择student的hello属性）展示在正在加载的输入框中

class Student{
    private String name;
    private  String hello;


    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }


    public Student(String name) {
        this.name = name;
        this.hello="你好，"+name;
    }

    public String getHello() {
        return hello;
    }
}

doGet方法：解释一下就是取出前台传输的name数据，用这个数据构造student对象，将这个student对象转换为json数据，并传给前台。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        String name=request.getParameter("name");
        ObjectMapper objectMapper=new ObjectMapper();
        Student student=new Student(name);
        String json=objectMapper.writeValueAsString(student);
        response.setContentType("application/json;charset=utf-8");
        PrintWriter printWriter=response.getWriter();
        printWriter.println(json);
        printWriter.flush();
        printWriter.close();
    }

输入孙七，点击submit，下方输入框刷新内容