Java后端开发——Ajax、jQuery和JSON

作者：System 时间：2024年08月15日分类：所有,ajax 字数：1353

这篇文章距离上次修改已过441天，其中的内容可能已经有所变动。

在Java后端开发中，使用Ajax、jQuery和JSON可以提升用户体验，实现前后端的异步交互。以下是一个简单的示例，展示了如何在Java Spring Boot应用中使用这些技术。

创建一个Spring Boot控制器，返回JSON数据：




import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
 
@RestController
public class DataController {
 
    @GetMapping("/data")
    public Map<String, Object> getData() {
        Map<String, Object> data = new HashMap<>();
        data.put("key", "value");
        return data;
    }
}

创建一个HTML页面，使用Ajax和jQuery异步请求上述数据：




<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#loadData").click(function(){
    $.ajax({
      url: "/data",
      type: "GET",
      dataType: "json",
      success: function(data) {
        console.log(data);
        $("#div1").html("Key: " + data.key);
      },
      error: function() {
        alert("Error loading data!");
      }
    });
  });
});
</script>
</head>
<body>
 
<div id="div1">Data will be loaded here...</div>
 
<button id="loadData">Load Data</button>
 
</body>
</html>

在这个例子中，当用户点击按钮时，会发起一个Ajax请求到/data端点，Spring Boot后端控制器处理请求并返回JSON格式的数据。然后，jQuery的success回调函数处理这些数据，并更新页面上的元素。这样，无需刷新页面即可更新数据。

Java后端开发——Ajax、jQuery和JSON

评论已关闭

推荐阅读