ajax发送请求的数据结构
ajax前后端的数据交互
1、ajax 发送字符串类型
前端：
// 发送ajax测试数据$.ajax({url: "settings/test/ajaxStr/toRecStr.do",data:{"code":"123","name":"张三"},type:"post",dataType:"json",success:function (data) {}})
后端接收：
当前端默认 ContentType 传参时，后端依次接收数据，可省略参数注解 @requestParam
@Controller
@RequestMapping("/settings/test")
public class TestController {@RequestMapping("/ajaxStr/toRecStr.do")public String toRecStr(String code,String name){System.out.println(code);System.out.println(name);return "aaa";}
}
2、ajax 发送实体类对象数据
发送实体类数据，需要先写好实体类，用于接收数据
注意：
- 实体类字段必须和前端数据的key 一一对应
- 前端数据的key不能出现实体类没有的字段，否则实体类全部接收不到数据
定义实体类：
定义实体类的时候，默认实现一些序列化接口，否则在网络传输过程中进行无法进行读写操作
public class DictionaryValue implements Serializable {private String id;private String value;private String text;private String orderNo;private String typeCode;
}
前端代码：
//定位发送Dom按钮$("#ajaxDom").click(function () {// 发送ajax测试数据$.ajax({url: "settings/test/ajaxDom/toRecDom.do",data:{"id":"111","value":"张三","text":"测试文本","orderNo":"22"// "typeCode":"33"},type:"post",dataType:"json",success:function (data) {}})})
后端接收代码：
@RequestMapping("ajaxDom/toRecDom.do")public String toRecDom(DictionaryValue dictionaryValue) {System.out.println(dictionaryValue);return "1";}
3、ajax 发送数据后端用 Map 接收
使用Map接收数据，适用于所有的场景
前端代码：
//定位发送Map按钮$("#ajaxMap").click(function () {// 发送ajax测试数据$.ajax({url: "settings/test/ajaxMap/toRecMap.do",data:{"code":"123","name":"张三"},type:"post",dataType:"json",success:function (data) {}})})
后端接收代码:
参数需要加注解 @RequestParam,不加注解后端接收不到数据
@RequestMapping("/ajaxMap/toRecMap.do")public Map<String,Object> toRecMap(@RequestParam Map<String,Object> hashMap){System.out.println(hashMap);return HandleFlag.successObj("data",hashMap);}
后端Map映射文件使用参数
collection : 迭代的集合，是 mapper文件中加的参数注解的值
int toSaveValue(@Param("dicValueMap") Map<String, Object> info);一个集合在一个sql中只能循环迭代一次，如果需要迭代2次，则需要传递2个相同集合即可
<insert id="toSaveValue" parameterType="map">INSERT INTO tbl_dic_value(typeCode,orderNo,value,text,id)VALUES<foreach collection="dicValueMap" item="value" open="(" close=")" separator=",">#{value}</foreach></insert>
4、ajax转换成JSON字符串进行传参
前端使用 contentType: “application/json; charset=utf-8” 的时候，必须要将JSON对象转换为JSON字符串进行传递，后台必须使用 @resquestBody 接收
1、后端使用实体类配合 @requestBody 接收
前端代码：
//定位发送ajaxJson按钮$("#ajaxJson").click(function () {var dictionaryValue = {"id":"111","value":"张三","text":"测试文本","orderNo":"22"// "typeCode":"33"}// 发送ajax测试数据$.ajax({url: "settings/test/ajaxJson/toRecJsonStr.do",contentType:"application/json;charset:utf-8",data:JSON.stringify(dictionaryValue),type:"post",dataType:"json",success:function (data) {}})})
后端代码：
@RequestMapping("/ajaxJson/toRecJsonStr.do")public Map<String,Object> toRecJsonStr(@RequestBody DictionaryValue dictionaryValue){System.out.println(dictionaryValue);return HandleFlag.successTrue();}
2、后端使用 Map 配合 @requestBody接收
前端代码：
//定位发送ajaxJson按钮$("#ajaxJson").click(function () {// 发送ajax测试数据$.ajax({url: "settings/test/ajaxJson/toRecJsonStr.do",contentType:"application/json;charset:utf-8",data: JSON.stringify({"name":"张三","age":"18"}),type:"post",dataType:"json",success:function (data) {}})})
后端代码：
@RequestMapping("/ajaxJson/toRecJsonStr.do")public Map<String,Object> toRecJsonStr(@RequestBody Map<String,Object> map){System.out.println(map);return HandleFlag.successTrue();}
5、将查询到的数据再前端动态展示
1、前端新增字典值，后台数据展示到前端下拉框
前端代码，点击创建跳转到新增静态页面：
<button type="button" class="btn btn-primary" onclick="window.location.href='settings/dictionary/value/toSaveValue.do'"><spanclass="glyphicon glyphicon-plus"></span> 创建</button>
后端代码：
model集合的数据可以在 return的页面中使用
@RequestMapping("/value/toSaveValue.do")public String toSaveValue(Model model){//通过 服务层，dao层查询到的数据集合List<DictionaryType> dictionaryTypeList = dictionaryService.findAllDicType();//将数据集合设置到model中model.addAttribute("dictionaryTypeList", dictionaryTypeList);//重点：返回指定页面，数据也会返回到该页面return "/settings/dictionary/value/save";}
前端使用数据
使用jstl中的c标签，需要导入依赖：<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
c标签迭代循环的参数说明：
参数说明:
1)items:是集合，用EL表达式；
2)var:变量名，存放items各个项 ,代表集合中每一条数据
3)varStatus: 显示循环状态的变量，有一下几个属性：
①index:从0开始; 显示当前迭代的索引值
②count:元素位置,从1开始; 显示当前迭代显示的行位置，通过配合判断语句，实现给奇、偶行着不同的色，以进行分区
③first:如果是第一个元素则显示true;
④last:如果是最后一个元素则显示true;
4)begin:循环的初始值(整型)；
5)end: 循环结束(整型);
6)step:步长,循环间隔的数值(整型)；
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<select class="form-control" id="create-dicTypeCode" style="width: 200%;"><option></option><!--使用jstl中的c标签，取出model传递的数据，items:数据集合，var:循环后的单条数据--><c:forEach items="${dictionaryTypeList}" var="dt" varStatus="dtStatus"><option>${dt.name}</option></c:forEach></select>
2、前端列表选择数据jquery写法
//定义一个变量，接收选择到的列表对象var curEl = null//从table 标签下的 tbody 标签下的数据，进行循环遍历$('table tbody tr').each((inx,el)=>{//从找到的元素下寻找 td元素，进行循环遍历$(el).find('td').each((chinx,chel)=>{//如果找到的元素下的 input 标签是被选中状态，就将该元素存储到变量中if($(chel).find('input').is(':checked')){curEl = el}})})var obj = {}// 循环元素中的键值对$(curEl).find('td').each((inx,el)=>{// 如果索引不是0，则将键值对加入到数据对象中if(inx != 0){obj[inx] = $(el).html();}})console.log(obj)
ajax发送请求的数据结构相关推荐
- JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据
JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据 最近写大创项目的时候,要做登录功能,考虑到之后还需要上传头像图片,因此决定使用FormData发送表单请求 ...
- Django Ajax发送请求使用方法
首先需要引入Jquery这个库 其次: 需要引入csrf_token 原因是因为django 表单认证需要csrf认证 最后,就是正常执行ajax发送请求 示例代码如下: <script src ...
- jQuery里如何使用ajax发送请求
回到文章总目录 本篇文章介绍的是在jQuery里如何使用ajax发送请求 jquery里面的单纯的get请求和单纯的post请求比较简洁的,也比较简易 jquery里面ajax通用方法(自定义个化强) ...
- AJAX，SpringMVC，拦截器（Ajax发送请求 经过SpringMVC拦截器重定向其他页面失败）
Ajax发送请求 经过SpringMVC拦截器重定向其他页面失败 借鉴出处 Ajax是通过异步请求后台,获取数据,局部刷新页面,因此,即使后台进行页面跳转的编码,前台请求完毕以后,只会执行ajax的回 ...
- js采用ajax发送请求获取数据（实例操作）
来,案例之前,容我分享一下js如何发送请求. 原生js发送请求: let xhr= new XMLHttpRequest(); // methods:GET/POST请求方式等,url:请求地址,tr ...
- JS中的Ajax发送请求获取数据流程
前言: JS两个常用的请求方法 [XMLHttpRequest() .fetch()] XMLHttpRequest() 的使用方法大致可以分为四步: 1.创建XMLHttpRequest的对象成员 ...
- React ajax 发送请求（六）
React ajax 发送请求(六) React 官网链接: 英文官网 中文官网 接着上节 React 代理配置(五) 前言 在实际做React 项目的时候, 前端应用需要通过 ajax 请求与后台进 ...
- $.ajax 发送请求,JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)
一.使用Ajax发送get请求 发送异步请求的步骤 - 获取Ajax对象:获取 XMLHttpRequest对象实例 - 创建请求:调用XMLHTTPRequest对象的open方法 - 设置回调函数 ...
- 超级详细Ajax发送请求（接受提示信息或者返回参数）
Ajax 在网页开发中必不可少,经常遇到,这里我写一下开发过程中比较常用的技术. 开发重点注意: 1.用户体验 2.程序性能.安全.可维护性.等等 // 提交数据到后台处理 $.ajax({url: ...
最新文章
- 英国政府发人工智能深度报告，力图保持领先地位
- bootstrap禁用点击空白处关闭模态框
- P8208-[THUPC2022 初赛]骰子旅行【dp】
- Ubuntu下Android编译环境的配置
- Linux防火墙配置与管理(16)
- 江湖传闻怪谈——让酒
- 60佳优秀的国外电子商务网站设计案例（上篇）
- AngularJS图片上传功能的实现
- jedate change事件监控，使用jedate无法使用change事件
- 信号处理基础——傅里叶变换与短时傅里叶变换
- 小白也能搞通UDP通信（88E1111 RGMII 接口）
- 支付宝小程序实现自定义头部导航栏
- 联想服务器修改开机启动项,怎样在Win10系统里面手动设置开机启动项
- php ffmpeg扩展下载
- cmd打开常用设置以及应用的快捷方法
- 外媒分析：为何说苹果一定没造车！
- git更新失败出现向下箭头
- 数据仓库和数据集市的概念、区别与联系
- Android图片加载框架最全解析（二），从源码的角度理解Glide的执行流程
- nuScenes自动驾驶数据集：格式转换，模型的数据加载（二）