实习知识整理6:前后端利用ajax数据传输的四种方式

方式1:前端发送key/value(String字符串),后台返回文本

前端: 

<input id="test1" type="button" value="前端发送key/value(String字符串),后台返回文本"/>
$(function() {

    $("#test1").click(function () {
        $.ajax({
            type:"post",//指定后台接收方式  后台可以使用@RequstMapping 或者 @PostMapping接收
            url:"http://localhost:8082/project/jsonTest1",
            data:"userName=jzt1&passWord=123&type=car",
            // contentType: '', // 指定后端接受的类型,后端不需要json格式,可以不指定
            // dataType: '',   // 指定后台返回前台的结果类型,如果不添加该属性,默认为String类型
            success:function (data) {//回调方法
                console.log(data);
            },error:function (e) {
                console.log(e);
                console.log("通讯失败");
            }
        });
    });
});

 后端:

    //  http://localhost:8082/project/jsonTest1
    @PostMapping("/jsonTest1")
    @ResponseBody
    //@ResponseBody的作用:将返回值转换为数据  ->
    // 1. 如果是字符串,不做任何转换
    // 2. 如果是对象,将对象转换为json格式返回
    public String jsonTest1(String userName, String passWord, User user) throws Exception {
        System.out.println("userName:" + userName);
        System.out.println("passWord:" + passWord);
        System.out.println("user:" + user.toString());
        return "后台返回需要的数据";
    }

 

 

 

 

方式2:前端发送key/value(String字符串),后台返回JSON

前端: 

<input id="test2" type="button" value="前端发送key/value(String字符串),后台返回JSON"/>
    $("#test2").click(function () {
        $.ajax({
            type:"post",
            url:"http://localhost:8082/project/jsonTest2",
            data:"userName=tom&passWord=123",
            dataType:'json',//指定后台返回前台的结果类型
            success:function (data) {//回调方法
                console.log(data);
            },error:function (e) {
                console.log(e);
                console.log("通讯失败");
            }
        });
    });

 后端:

    //  http://localhost:8082/project/jsonTest1
    @PostMapping("/jsonTest2")
    @ResponseBody
    //@ResponseBody的作用:将返回值转换为数据  ->
    // 1. 如果是字符串,不做任何转换
    // 2. 如果是对象,将对象转换为json格式返回
    public User jsonTest2(String userName, String passWord, User user) throws Exception {
        System.out.println("userName:" + userName);
        System.out.println("passWord:" + passWord);
        System.out.println("user:" + user.toString());
        user = userService.findUserByName(userName);

        return user;
    }

 

 

 方式3:前端发送JSON,后台返回文本

 前端:

<input id="test3" type="button" value="前端发送JSON,后台返回文本"/>
$("#test3").click(function () {
        $.ajax({
            type:"post",
            url:"http://localhost:8082/project/jsonTest3",
            contentType:"application/json;charset=utf-8",//指定前台向后台传递数据类型  json格式
            data:'{"userName":"jzt1","passWord":"123"}',
            success:function (data) {//回调方法
                console.log(data);
            },error:function (e) {
                console.log(e);
                console.log("通讯失败");
            }
        });
    });

 

 

后端: 

    //  http://localhost:8082/project/jsonTest3
    @PostMapping("/jsonTest3")
    @ResponseBody
    //@ResponseBody的作用:将返回值转换为数据  ->
    // 1. 如果是字符串,不做任何转换
    // 2. 如果是对象,将对象转换为json格式返回
    public String jsonTest3(@RequestBody User user) throws Exception {   // 如果前台发送的数据是json格式的数据,需要使用 @RequestBody声明!!!
        System.out.println("user:" + user.toString());
        return "后台文本";
    }

 

 

 

方式4:前端发送JSON,后台返回JSON

前端:

<input id="test4" type="button" value="前端发送JSON,后台返回JSON"/>
    $("#test4").click(function () {
        $.ajax({
            type:"post",
            url:"http://localhost:8082/project/jsonTest4",
            contentType:"application/json;charset=utf-8",//指定前台向后台传递数据类型  json格式
            dataType:'json',//指定后台返回前台的结果类型
            data:'{"userName":"tom","passWord":"123"}',
            success:function (data) {//回调方法
                console.log(data);
            },error:function (e) {
                console.log(e);
                console.log("通讯失败");
            }
        });
    });

后端: 

    //  http://localhost:8082/project/jsonTest4
    @PostMapping("/jsonTest4")
    @ResponseBody
    //@ResponseBody的作用:将返回值转换为数据  ->
    // 1. 如果是字符串,不做任何转换
    // 2. 如果是对象,将对象转换为json格式返回
    public User jsonTest4(@RequestBody User user) throws Exception {
        System.out.println("user:"+ user.toString());
        user = userService.findUserByName(user.getUserName());
        return user;
    }

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/267119.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LaTex详细安装及配置(Windows)

文章目录 引言LaTeX简介优势与应用领域 安装环境安装texlive下载texlive安装 编辑器安装texstudio下载texstudio安装 环境配置 使用第一个LaTex文档新建文件编程查看 效果 结语 引言 在当今信息技术高度发达的时代&#xff0c;文档的编辑和排版是我们日常工作和学习中不可或缺…

深入了解TypeChat

在过去的几个月里&#xff0c;我们看到了最新一波大型语言模型的热潮。虽然聊天助手是最直接的应用程序&#xff0c;但如何最好地将这些模型集成到现有的应用程序界面中仍是一个大问题。 换句话说&#xff0c;我们如何用自然语言界面增强传统UI ? 我们如何使用人工智能来接受…

ctfshow中web入门第web41

ctfshow中web入门第web41 ​​ 留下了|运算绕过的方法那么直接利用脚本即可。 先用or运算的php脚本生成需要的规则文件(.txt文件)。如下图直接把需要绕过的正则替换成题目的正则就好&#xff1a; ​​ 再用python脚本基于刚刚生成的txt文件跑出payload&#xff0c;如下图&…

9.独立看门狗IWDG窗口看门狗WWDG编码思路

前言&#xff1a; 看门狗是维护系统稳定性的一向技术&#xff0c;可以让代码跑飞及时复位&#xff0c;在产品中非常常用&#xff0c;俗话说&#xff0c;重启能解决90%的问题&#xff0c;作为产品来说&#xff0c;你总不能因为一次bug就让程序卡死不动了&#xff0c;肯定要试着重…

消息队列之关于如何实现延时队列

一、延时队列的应用 1.1 什么是延时队列&#xff1f; 顾名思义&#xff1a;首先它要具有队列的特性&#xff0c;再给它附加一个延迟消费队列消息的功能&#xff0c;也就是说可以指定队列中的消息在哪个时间点被消费。 延时队列在项目中的应用还是比较多的&#xff0c;尤其像…

2024年值得关注的十大TS项目

探索未来&#xff1a;用无/低代码工具和人工智能创新重塑2024年的十大TS项目 再过几天&#xff0c;2023年就要结束了&#xff0c;我们即将迎来2024年。2023年是人工智能技术快速发展的一年&#xff0c;人工智能应用激增。人工智能技术的飞速发展给我们的生活和工作带来了巨大的…

CreateProcess error=216, 该版本的 %1 与你运行的 Windows 版本不兼容。请查看计算机的系统信息,然后联系软件发布者。

第一个go程序就出错了&#xff0c;错误提示&#xff1a; Error running ‘go build hello.go’: Cannot run program “C:\Users\Administrator\AppData\Local\Temp___go_build_hello_go.exe” (in directory “G:\go\workspace”): CreateProcess error216, 该版本的 %1 与你运…

【React Native】第一个Android应用

第一个Android应用 环境TIP开发工具环境及版本要求建议官方建议 安装 Android Studio首次安装模板选择安装 Android SDK配置 ANDROID_HOME 环境变量把一些工具目录添加到环境变量 Path[可选参数] 指定版本或项目模板 运行使用 Android 模拟器编译并运行 React Native 应用修改项…

2023-强网杯-【强网先锋-ez_fmt】

文章目录 ez_fmt libc-2.31.so检查main思路exp 参考链接 ez_fmt libc-2.31.so 检查 没有地址随机化 main 简单粗暴的printf格式化字符串漏洞 思路 泄露地址&#xff0c;覆盖返回地址形成ROP链 printf执行时栈上存在__libc_start_main243的指令的地址&#xff0c;可以泄露…

C/C++ 基础函数

memcpy&#xff1a;C/C语言中的一个用于内存复制的函数&#xff0c;声明在 string.h 中&#xff08;C是 cstring&#xff09; void *memcpy(void *destin, void *source, unsigned n);作用是&#xff1a;以source指向的地址为起点&#xff0c;将连续的n个字节数据&#xff0c;…

全国(山东、安徽)职业技能大赛--信息安全管理与评估大赛题目+答案讲解

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

Python算法例25 落单的数Ⅲ

1. 问题描述 给出2n2个非负整数元素的数组&#xff0c;除其中两个数字之外&#xff0c;其他每个数字均出现两次&#xff0c;找到这两个数字。 2. 问题示例 给出[1&#xff0c;2&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;4&#xff0c;5&#xff0c;3]&#xff0c…

dubbo线程池为什么耗尽

文章概述 大家可能都遇到过DUBBO线程池打满这个问题&#xff0c;报错如下&#xff0c;本文我们就一起分析DUBBO线程池打满这个问题。 cause: org.apache.dubbo.remoting.RemotingException: Server side(10.0.0.100,20881) thread pool is exhausted, detail msg:Thread pool …

Python中json模块的使用与pyecharts绘图的基本介绍

文章目录 json模块json与Python数据的相互转化 pyecharts模块pyecharts基本操作基础折线图配置选项全局配置选项 json模块的数据处理折线图示例示例代码 json模块 json实际上是一种数据存储格式&#xff0c;是一种轻量级的数据交互格式&#xff0c;可以把他理解成一个特定格式…

模型微调入门介绍一

备注&#xff1a;模型微调系列的博客部分内容来源于极客时间大模型微调训练营素材&#xff0c;撰写模型微调一系列博客&#xff0c;主要是期望把训练营的内容内化成自己的知识&#xff0c;我自己写的这一系列博客除了采纳部分训练营的内容外&#xff0c;还会扩展细化某些具体细…

【贪心】单源最短路径Python实现

文章目录 [toc]问题描述Dijkstra算法Dijkstra算法应用示例时间复杂性Python实现 个人主页&#xff1a;丷从心 系列专栏&#xff1a;贪心算法 问题描述 给定一个带权有向图 G ( V , E ) G (V , E) G(V,E)&#xff0c;其中每条边的权是非负实数&#xff0c;给定 V V V中的一个…

Packet Tracer -使用 Ping 和 Traceroute测试 网络的连通性

地址分配表 目标 第 1 部分&#xff1a;测试和恢复 IPv4 连通性 第 2 部分&#xff1a;测试和恢复 IPv6 连通性 场景 本练习中存在连通性方面的问题。除了 收集和记录有关网络的信息&#xff0c;您还需要找出 问题&#xff0c;并实施可行的解决方案来恢复网络的连通性。 注意…

c语言:求1/2+2/3+3/4+……n-1/n的和|练习题

一、题目 求1/22/33/4……n-1/n的和 如图&#xff1a; 二、思路分析 1、1/2、2/3、3/4……可以用(i/i1) 2、设置一个函数&#xff0c;求数的相加之和 三、代码截图【带注释】 四、源代码【带注释】 #include <stdio.h> int main() { int num; printf("输入…

【RabbitMQ】RabbitMQ详解(二)

RabbitMQ详解 死信队列死信来源消息TTL过期队列达到最大长度消息被拒绝 RabbitMQ延迟队列TTL的两种设置队列设置TTL消息设置TTL 整合SrpingBoot队列TTL延时队列TTL优化Rabbtimq插件实现延迟队列 死信队列 先从概念解释上搞清楚这个定义&#xff0c;死信&#xff0c;顾名思义就…

S7项目EMS输送线操作

C型钩装置是支撑轨道的挂件,通过和轨道配合可以组成寓任意输送网络。并且可以拆卸和调整。 轨道是承载重物并供载物车行走的部件,它是通过连接装置(支撑件)悬于辅梁或房架上。它分直轨和弯轨两种形式,与道岔配合,能组合成生产工艺所需的任意输送网络。 道岔是载物车沿 轨…