实习知识整理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;}

 

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

R语言 | 组学各类图形绘制资源

一边学习&#xff0c;一边总结&#xff0c;一边分享&#xff01; 写在前面 今天分享在GitHub中找到的教程资源&#xff0c;此教程是来自iMeta期刊及“农心生信工作室”的作品。发表在GitHub中&#xff0c;大家可以自行下载。 包含了21个图形的绘制&#xff0c;我大体看了一下…

超全面!8 种互联网常用生命周期完整指南~

什么是生命周期&#xff1f; 百度给出的定义是&#xff1a;生命周期就是指一个对象的生老病死。 生命周期的概念应用很广泛&#xff0c;特别是在政治、经济、环境、技术、社会等诸多领域经常出现&#xff0c;其基本涵义可以通俗地理解为“从摇篮到坟墓”的整个过程。对于某个…

百度网盘win11端扫一扫登录二维码无法显示问题的解决方法

百度网盘win11端扫一扫登录二维码无法显示问题的解决方法 文章目录 问题描述解决方法1、打开Edge 设置2、进入Reset settings页面3、单击重置按钮&#xff1a;4、重新打开百度网盘APP 问题描述 今天在win11端扫描登录百度云网盘时&#xff0c;二维码无法加载出来&#xff0c;具…

第十三章 常用类(包装类和 String 相关类)

一、包装类 1. 包装类的分类 &#xff08;1&#xff09;针对八种基本数据类型相应的引用类型—包装类 &#xff08;2&#xff09;有了类的特点&#xff0c;就可以调用类中的方法。 2. 包装类和基本数据类型的转换 &#xff08;1&#xff09;jdk5 前的手动装箱和拆箱方式 publ…

基于电商场景的高并发RocketMQ实战-NameServer内存中核心数据模型分析、内核级Producer发送消息流程

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 【11来了】文章导读地址&#xff1a;点击查看文章导读&#xff01; &#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f3…

基于Matlab/Simulink不平衡电网工况下级联H桥光伏并网逆变器仿真模型

本次更新的内容为级联H桥光伏并网逆变器相关的控制&#xff0c;后面会针对储能系统在级联H桥拓扑上的应用进行分享。由于传统发电造成的环境污染问题和光伏电池板价格持续创新低&#xff0c;太阳能从众多种类的可再生能源中拔地而起&#xff0c;因而光伏逆变器成为国内外学者和…

分布式锁功效初探——以电商问题为例

文章目录 电商库存问题单机处理-Sychronized多机器处理-分布式锁入门级别&#xff0c;用redis实现&#xff0c;setnx问题1&#xff1a;逻辑可能异常&#xff0c;造成死锁问题2&#xff1a;机器宕机问题3&#xff1a;锁一直失效&#xff0c;乱套锁续命 redisson分布式丢锁问题主…

前菜---二叉树+堆的小练习

目录 前言&#x1f3dc;️ 1. 二叉树性质总结⛱️ 1.2 性质3⏰ 2. 二叉树性质小练习&#x1f3d5;️ 3. 答案解析&#x1f4a1; 4. 堆概念结构小练习&#x1fa94; 5. 答案解析&#x1f9ff; 6. 前/中/后/层序遍历小练习&#x1f52b; 7. 答案解析&#x1f9fa; 后语…

C++中的内存锁定

内存锁定(memory locking)是确保进程保留在主内存中并且免于分页的一种方法。在实时环境中&#xff0c;系统必须能够保证将进程锁定在内存中&#xff0c;以减少数据访问、指令获取、进程之间的缓冲区传递等的延迟。锁定内存中进程的地址空间有助于确保应用程序的响应时间满足实…

LeetCode 1954. 收集足够苹果的最小花园周长

一、题目 1、题目描述 给你一个用无限二维网格表示的花园&#xff0c;每一个 整数坐标处都有一棵苹果树。整数坐标 (i, j) 处的苹果树有 |i| |j| 个苹果。 你将会买下正中心坐标是 (0, 0) 的一块 正方形土地 &#xff0c;且每条边都与两条坐标轴之一平行。 给你一个整数 need…

DevC++ 用C语言的多线程 实现简单的客户端和服务器

知识来源一&#xff1a; 使用Dev-C实现简单的客户端和服务器-CSDN博客 此先生的博客使用的是win32 SDK来创建多线程&#xff0c;然后鄙人对这个版本的多线程细节不明。于是又重新用C语言的线程替代win32API,以此继续学习服务器代码。 知识来源二&#xff1a;DevC 多线程创建…

Windows 11中显示文件扩展名的方法与Windows 10大同小异,但前者更人性化

默认情况下&#xff0c;Windows 11会隐藏已知文件类型的文件扩展名。这可能会使在不首先打开文件的情况下很难识别文件类型。 幸运的是&#xff0c;你可以将Windows 11配置为显示已知文件类型的扩展名。该方法类似于Windows 10&#xff0c;但该选项现在组织在下拉菜单中&#…