遵义阿里云代理商：ajax刷新java

luotuoemo • 2023年12月29日 02:24 • 阿里云 • 85 views

Ajax是一种运用JavaScript和XML技术的Web开发技术，可以实现页面无刷新、异步请求数据等功能。在Java中，可以使用Servlet和JSP等技术来处理Ajax请求，实现页面的动态刷新。

下面是一个简单的示例，使用Ajax和Java Servlet来实现页面的动态刷新：

创建一个Servlet，处理Ajax请求并返回数据：

@WebServlet("/getData")
public class MyServlet extends HttpServlet {
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 获取请求参数
    String name = request.getParameter("name");

    // 处理请求
    String result = "Hello, " + name + "!";

    // 返回响应
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.write(result);
    out.close();
  }
}

创建一个HTML页面，通过Ajax请求Servlet来获取数据并更新页面：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Ajax Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#btn").click(function() {
        // 发送Ajax请求
        $.get("getData", {name: $("#name").val()}, function(result) {
          // 更新页面
          $("#result").text(result);
        });
      });
    });
  </script>
</head>
<body>
  <input type="text" id="name">
  <button id="btn">Submit</button>
  <div id="result"></div>
</body>
</html>

在上面的示例中，当用户点击Submit按钮时，通过Ajax请求MyServlet，并传递name参数，MyServlet处理请求并返回结果，页面通过回调函数处理返回结果并更新页面。这样就实现了页面的动态刷新。

后台数据的方法

在Java后台代码中，可以使用SpringMVC框架提供的@ResponseBody注解将数据以JSON格式返回给前端页面。在Ajax请求中，通过success回调函数获取后台返回的数据，并使用jQuery操作DOM元素实现局部刷新。

示例代码：

Java后台代码：

@Controller
@RequestMapping(“/user”)
public class UserController {

@Autowired
private UserService userService;

@RequestMapping(value = "/list", method = RequestMethod.GET)
@ResponseBody
public List<User> list() {
    List<User> userList = userService.findAll();
    return userList;
}

}

前端页面代码：

$.ajax({

url: "/user/list",
type: "get",
dataType: "json",
success: function (data) {
    //获取后台返回的数据并操作DOM元素
    var html = '';
    $.each(data, function (index, item) {
        html += '<tr><td>' + item.id + '</td><td>' + item.name + '</td><td>' + item.age + '</td></tr>';
    });
    $("#userTable tbody").html(html);
}

});

发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/116119.html