【第14章】spring-mvc之ajax

你知道“铁甲小宝”吗丶

已于 2024-07-12 22:12:37 修改

阅读量732

点赞数 21

分类专栏： # springmvc 文章标签： spring mvc ajax

于 2024-05-08 19:45:41 首次发布

本文链接：https://blog.csdn.net/qq_44824164/article/details/138401145

版权

springmvc 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章目录

前言
一、准备
二、单个值
三、对象
四、JSON对象
五、JSON数组
总结

前言

AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，通过在后端与服务器进行少量数据交换，AJAX 可以使网页应用快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。在实践中，虽然数据交换格式常用的是 JSON 而不是 XML，但 AJAX 这个名字仍然被广泛使用。

一、准备

在这里插入图片描述

<mvc:view-controller path="hello-ajax" view-name="params/ajax"/>

<a href="/hello-ajax">Hello Ajax</a><br>

二、单个值

1.前端

<%--
  Created by IntelliJ IDEA.
  User: 张军国001
  Date: 2024/5/2
  Time: 21:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
</head>
<body>
<button onclick="btn1()">单个值</button><br>
<button onclick="btn2()">对象</button><br>
<button onclick="btn3()">对象数组</button><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function (){
        console.log("hello ajax")
    })
    function btn1(){
        var name="张三";
        $.get('${pageContext.request.contextPath}/ajax01?name='+name, function(result) {
            console.log(result); // 打印返回的数据
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.error('Error: ' + textStatus, errorThrown);
        });
    }
    }
</script>
</body>
</html>

2.后端

package org.example.springmvc.params.controller;

import com.alibaba.fastjson2.JSONArray;
import org.example.springmvc.params.entity.User;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * Create by zjg on 2024/5/2
 */
@RestController
public class AjaxController {
    @RequestMapping("/ajax01")
    public String ajax01(String name){
        System.out.println(name);
        return name;
    }
}

3. 结果

张三

三、对象

1.前端

function btn2(){
    var data={'id': 1, 'name': '张三' ,'birth':'2024-05-02','relatives':{'k1':'v1','k2':'v2'}};
    $.post('${pageContext.request.contextPath}/ajax02', data, function(result) {
        console.log(result); // 打印返回的数据
    }).fail(function(jqXHR, textStatus, errorThrown) {
        console.error('Error: ' + textStatus, errorThrown);
    });
}

2.后端

@RequestMapping("/ajax02")
public User ajax02(User user){
    System.out.println(user);
    return user;
}

3. 结果

User(id=1, name=张三, birth=Thu May 02 00:00:00 CST 2024, alias=null, hobbies=null, relatives={k1=v1, k2=v2}, role=null, friends=null)

四、JSON对象

1.前端

function btn3(){
   var data={'id': 1, 'name': '张三' ,'birth':'2024-05-02','relatives':{'k1':'v1','k2':'v2'}};
    $.ajax({
        url: '${pageContext.request.contextPath}/ajax03', // 请求的URL
        type: 'POST', // 请求类型（GET、POST等）
        contentType: 'application/json',
        dataType: 'json', // 预期服务器返回的数据类型（json、xml、html等）
        data: JSON.stringify(data),
        success: function(result, textStatus, jqXHR) {// 请求成功时执行的函数
            console.log(result); // 打印返回的数据
        },
        error: function(jqXHR, textStatus, errorThrown) { // 请求失败时执行的函数
            console.error('Error: ' + textStatus, errorThrown);
        }
    });
}

2.后端

@RequestMapping("/ajax03")
public JSONObject ajax03(@RequestBody JSONObject jsonObject){
    System.out.println(jsonObject);
    return jsonObject;
}

3. 结果

{"id":1,"name":"张三","birth":"2024-05-02","relatives":{"k1":"v1","k2":"v2"}}

五、JSON数组

1.前端

function btn4(){
    var data=[{ 'id': 1, 'name': '张三' ,'birth':'2024-05-02'},
        { 'id': 2, 'name': '李四' ,'birth':'2024-05-02'}];
    $.ajax({
        url: '${pageContext.request.contextPath}/ajax04', // 请求的URL
        type: 'POST', // 请求类型（GET、POST等）
        contentType: 'application/json',
        dataType: 'json', // 预期服务器返回的数据类型（json、xml、html等）
        data: JSON.stringify(data),
        success: function(result, textStatus, jqXHR) {// 请求成功时执行的函数
            console.log(result); // 打印返回的数据
        },
        error: function(jqXHR, textStatus, errorThrown) { // 请求失败时执行的函数
            console.error('Error: ' + textStatus, errorThrown);
        }
    });
}

2.后端

@RequestMapping("/ajax04")
public JSONArray ajax04(@RequestBody JSONArray jsonArray){
    System.out.println(jsonArray);
    return jsonArray;
}

3. 结果

[{"id":1,"name":"张三","birth":"2024-05-02"},{"id":2,"name":"李四","birth":"2024-05-02"}]

总结

回到顶部

你知道“铁甲小宝”吗丶

关注

21
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
【第14章】spring-mvc之ajax

AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，通过在后端与服务器进行少量数据交换，AJAX 可以使网页应用快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。在实践中，虽然数据交换格式常用的是 JSON 而不是 XML，但 AJAX 这个名字仍然被广泛使用。回到顶部。
复制链接

扫一扫

专栏目录