ajax发送请求的数据结构

最新推荐文章于 2022-12-12 11:19:06 发布

~哦~豁~

最新推荐文章于 2022-12-12 11:19:06 发布

阅读量565

点赞数

分类专栏： java 前端文章标签： ajax 数据结构前端

本文链接：https://blog.csdn.net/ziao890122/article/details/125088385

版权

java 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

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'"><span
                class="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)