• SpringMVC基础：AJAX发送请求

    AJAX请求

    前面我们讲解了如何向浏览器发送一个JSON格式的数据，那么我们现在来看看如何向服务器请求数据。

    Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），它的目标就是实现页面中的数据动态更新，而不是直接刷新整个页面，它是一个概念。

    它在JQuery框架中有实现，因此我们直接导入JQuery（JQuery极大地简化了JS的开发，封装了很多内容，感兴趣的可以了解一下）：

    <script src="https://code.jquery.com/jquery-3.1.1.min.js">script>

    接着我们就可以直接使用了，首先修改一下前端页面：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="https://code.jquery.com/jquery-3.1.1.min.js">script>
    7.     <script th:src="@{/static/test.js}">script>
    8. head>
    9. <body>
    10.     你好，
    11.     <span id="username">span>
    12.     您的年龄是：
    13.     <span id="age">span>
    14.     <button onclick="updateData()">点我更新页面数据button>
    15. body>
    16. html>

    现在我们希望用户名称和年龄需要在我们点击按钮之后才会更新，我们接着来编写一下JS：

    1. function updateData() {
    2.     //美元符.的方式来使用Ajax请求，这里使用的是get方式，第一个参数为请求的地址（注意需要带上Web应用程序名称），第二个参数为成功获取到数据的方法，data就是返回的数据内容
    3.   	$.get("/mvc/data", function (data) {   //获取成功执行的方法
    4.         window.alert('接受到异步请求数据：'+JSON.stringify(data))  //弹窗展示数据
    5.         $("#username").text(data.name)   //这里使用了JQuery提供的选择器，直接选择id为username的元素，更新数据
    6.         $("#age").text(data.age)
    7.     })
    8. }

    使用JQuery非常方便，我们直接通过JQuery的选择器就可以快速获取页面中的元素，注意这里获取的元素是被JQuery封装过的元素，需要使用JQuery提供的方法来进行操作。

    这样，我们就实现了从服务端获取数据并更新到页面中（实际上之前，我们在JavaWeb阶段使用XHR请求也演示过，不过当时是纯粹的数据）

    那么我们接着来看，如何向服务端发送一个JS对象数据并进行解析：

    1. function submitData() {
    2.     $.post("/mvc/submit", {   //这里使用POST方法发送请求
    3.         name: "测试",     //第二个参数是要传递的对象，会以表单数据的方式发送
    4.       	age: 18   
    5.     }, function (data) {
    6.         window.alert(JSON.stringify(data))   //发送成功执行的方法
    7.     })
    8. }

    服务器端只需要在请求参数位置添加一个对象接收即可（和前面是一样的，因为这里也是提交的表单数据）：

    1. @RequestMapping("/submit")
    2. @ResponseBody
    3. public String submit(Student student){
    4.     System.out.println("接收到前端数据："+student);
    5.     return "{\"success\": true}";
    6. }

    我们也可以将js对象转换为JSON字符串的形式进行传输，这里需要使用ajax方法来处理：

    1. function submitData() {
    2.     $.ajax({   //最基本的请求方式，需要自己设定一些参数
    3.         type: 'POST',   //设定请求方法
    4.         url: "/mvc/submit",   //请求地址
    5.         data: JSON.stringify({name: "测试", age: 18}),  //转换为JSON字符串进行发送
    6.         success: function (data) {
    7.             window.alert(JSON.stringify(data))
    8.         },
    9.         contentType: "application/json"  //请求头Content-Type一定要设定为JSON格式
    10.     })
    11. }

    如果我们需要读取前端发送给我们的JSON格式数据，那么这个时候就需要添加@RequestBody注解：

    1. @RequestMapping("/submit")
    2. @ResponseBody
    3. public String submit(@RequestBody JSONObject object){
    4.     System.out.println("接收到前端数据："+object);
    5.     return "{\"success\": true}";
    6. }

    这样，我们就实现了前后端使用JSON字符串进行通信。

  • 相关阅读:
    ROS基础学习
    视图、存储过程、触发器
    解决 php post 而 gin 收不到问题
    springboot+vue+elementui家教平台系统java267
    改进YOLOv5系列：结合ShuffleNet V2主干网络，高效CNN架构设计的实用指南
    整理了197个经典SOTA模型，涵盖图像分类、目标检测、推荐系统等13个方向
    卷积神经网络结合ESMM求解ctrcvr问题
    如何制作我的第一个Phaser.js游戏
    Spring原理：Mybatis整合原理
    PbootCMS 应用快速迁移至浪潮信息 KeyarchOS 云服务器
  • 原文地址：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/126824131