ajax的书写方式和数组、map、object、list的前后台传参方式

最新推荐文章于 2023-03-16 10:34:00 发布

爱吃西瓜的小秃头

最新推荐文章于 2023-03-16 10:34:00 发布

阅读量907

点赞数 2

文章标签： ajax json javascript post jquery

本文链接：https://blog.csdn.net/qq_41943011/article/details/111395617

版权

jqueryAjax(重)

同步方式：客户机就要等到服务器返回消息后才去执行其他操作。

异步方式：客户机就不等待服务器的响应。

注意：这是异步无刷新技术，例如：QQ给别的动态留言，留言完毕后，我们可以看到自己所写的留言，但是这个时候QQ空间并没有刷新。

一、ajax 的书写方式

1.1 $.ajax({})

格式：$.ajax({});
参数：
type：请求⽅式 GET/POST 在这里插入图片描述

url：请求地址 url
async：是否异步，默认是 true 表示异步，可以省略不写
data：发送到服务器的数据，可以省略不写
dataType：预期服务器返回的数据类型
contentType：设置请求头，可以省略不写
success：请求成功时调⽤此函数
error：请求失败时调⽤此函数，可以省略不写

<script type="text/javascript">
    $.ajax({
        type:'GET',
        url:'js/data.json',//这个是自己创建的json文件
        data:{
            uname:'admin',
            upwd:'1234'
        },
        dataType:'json',
        success:function(data){
            console.log(data);
        }
    });
</script>

1.2 $.get()

<script type="text/javascript">
    $.get("js/data.json",{uname:'admin'},function(data){
        console.log(data);
    });
</script>

1.3 $.post()

<script type="text/javascript">
    $.post("js/data.json",{uname:'admin'},function(data){
        console.log(data);
    });
</script>

1.4 $.getJSON()

<script type="text/javascript">
    $.getJSON("js/data.json",{uname:'admin'},function(data){
        console.log(data);
    });
</script>

1.5 jqueryAjax例子

<div id="test">

</div>
<script type="text/javascript">
    $.ajax({
        type:'GET',
        url:'js/Data.json',//这个是自己创建的json文件
        data:{},
        dataType:'json',
        success:function(data){
            console.log(data);
            //解析数据，将数据追加到div中
            loadData(data);
        }
    });

    function loadData(data){
        if(data.code==1){
            //创建表格
            var table="<table width='600' align='center' border='1' 
                         style='border-collapse: collapse;'></table>";
            //表头
            var tbhead="<tr><th>编号</th><th>用户名</th><th>密码</th><th>年龄</th><th>性别                            </th><th>操作</th></tr>";
            //表格中追加表头
            $(table).append(tbhead);
            //解析数据
            if(data.result.length>0){
                for (var i = 0; i < data.result.length; i++) {
                    var user=data.result[i];
                    var uid=user.uid;
                    var uname=user.uname;
                    var upwd=user.upwd;
                    var uage=user.uage;
                    var usex=user.usex?"男":"女";

                    var str="<tr align='center'><td>"+uid+"</td><td>"+uname+"</td>		                              <td>"+upwd+"</td><td>"+uage+"</td><td>"+usex+"</td></tr>";
                    $(table).append(str);
                }
            }
            $("#test").append($(table));
        }else{
            var str="<h2 align='center'>"+data.msg+"</h2>";
            $("#test").append(str);
        }
    }
</script>

二、ajax 传递参数的方式

2.1 ajax 请求参数为数组时(数组传参)

1.4 的版本中, 会默认对请求参数进行深度序列化,所以传递的参数为数组时,后端无法直接对请求参数进

行绑定

传递数组的格式：
在这里插入图片描述

2.1.1 解决方案一

在ajax中加入 traditional 属性

traditional：是否使用传统的方式浅层序列化

前端传递参数：

$.ajax({
        // 使用传统的方式进行序列化  把json对象 转成k/v 的键值对
        traditional: true,
        url: "stu/deleteStu.action",
    	type:"post",
        data: {
            // ids 请求参数类型为数组
            ids: ids
        },
        success: function (data) {
           ...
        },
        dataType: "json"
    });

传递参数：

在这里插入图片描述

后端绑定参数：

@ResponseBody
@RequestMapping("/deleteStu.action")
public Result deleteStu(@RequestParam("ids") ArrayList<String> ids){
     boolean removeStatus = stuService.removeByIds(ids);
     return new Result(removeStatus ? "删除成功" : "删除失败", removeStatus);
}

2.1.2 解决方案二

使用 request 对象 getParameterValues() 方法去接受前端发送的数组

前端传递参数：

$.ajax({
        url: "stu/deleteStu.action",
        data: {
            ids: ids
        },
        success: function (data) {
           ...
        },
        dataType: "json"
    });

传递的参数：

在这里插入图片描述

后端绑定参数：

@ResponseBody
@RequestMapping("/deleteStu.action")
public Result deleteStu(HttpServletRequest request){
     String[] arr = request.getParameterValues("ids[]");
     boolean removeStatus = stuService.removeByIds(Arrays.asList(arr));
     return new Result(removeStatus ? "删除成功" : "删除失败", removeStatus);
}

2.1.3 解决方案三

将请求参数格式化为 json 字符串格式，通过 JSON.stringify(data) 实现

需要在 $.ajax({}) 中设置content: “application/json”

请求方法类型设置为 post

使用 @RequestBody 注解

前端传递参数

$.ajax({
        url: "stu/deleteStu.action",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify(ids),
        success: function (data) {
           ...
        },
        dataType: "json"
    });

请求参数：

在这里插入图片描述
后端绑定参数：

@ResponseBody
@RequestMapping("/deleteStu.action")
public Result deleteStu(@RequestBody String[] ids){
      boolean removeStatus = stuService.removeByIds(Arrays.asList(ids));
      return new Result(removeStatus ? "删除成功" : "删除失败", removeStatus);
}

2.1.4 解决方案四

前端拼接字符串

前端传递参数

var idStr+=this.id+","
//或者
var idStr=[];
idStr.push(25);
idStr.push(26);

$.ajax({
        url: "stu/deleteStu.action",
    	type:"post",
        data: {
            idStr: idStr
        },
        success: function (data) {
            ...
        },
        dataType: "json"
    });

请求参数：
在这里插入图片描述

后端绑定参数：

@ResponseBody
@RequestMapping("/deleteStu.action")
public Result deleteHost(String idStr 或者 Long [] idStr){
     String[] ids = idStr.split(",");
     //或者
     String [] ids= idStr;
     boolean removeStatus = stuService.removeByIds(Arrays.asList(ids));
     return new Result(removeStatus ? "删除成功" : "删除失败", removeStatus);
}

2.2 ajax 传递map时

前端传递参数：

var submitMap2=function () {
    var params1={};
    params1['name']=$("#name");
    params1['age']=$("#age");
    $.ajax({
        url:"/acceptMap",
        type:"post",
        dataType:"json",
        data:params1,
        success:function (result) {
            console.log(result);//传入后台的值key和value 对应为 {name=xigua, age=22}
        }
    });
};


var submitMap3=function () {
    $.ajax({
        url:"/acceptMap",
        type:"post",
        dataType:"json",
        data:{name:$("#name"),age:$("#age")},
        success:function (result) {
            console.log(result);//传入后台的值key和value 对应为 {name=xigua, age=22}
        }
    });
};


var submitMap4=function () {
    $.ajax({
        url:"/acceptMap",
        type:"post",
        dataType:"json",
        data:{"name":$("#name"),"age":$("#age")},
        success:function (result) {
            console.log(result);//传入后台的值key和value 对应为 {name=xigua, age=22}
        }
    });
};

后端绑定参数:

 @RequestMapping("/acceptMap")
 public String acceptMap(@RequestParam Map<String,String> params){}

2.3 ajax 传递对象时

前端传递参数：

  var submitObject=function () {
    $.ajax({
        url:"/acceptObject",
        type:"post",
        dataType:"json",
        data:{name:"aa",age:12},
        success:function (result) {
            console.log(result);
        }
    });
}

var submitObject1=function () {
    $.ajax({
        url:"/acceptObject",
        type:"post",
        dataType:"json",
        data:{"name":"aa1","age":13},
        success:function (result) {
            console.log(result);
        }
    });
}

var submitObject2=function () {
    var params={};
    params['name']=$("#name");
    params['age']="13";
    $.ajax({
        url:"/acceptObject",
        type:"post",
        dataType:"json",
        data:params,
        success:function (result) {
            console.log(result);
        }
    });
}

后端绑定参数：

@RequestMapping("/acceptObject")
public String acceptObject(Person person){}

2.4 ajax 传递 list 时

2.4.1 方式一

前端传递参数：

 /**
 * 该方法只支持POST请求，和前面数组传参的第三种方式是一样的
 */
var submitList=function () {
    var list=[];
    list.push("aa");
    list.push("bb");
    $.ajax({
        url:"/acceptList",
        dataType:"JSON",
        contentType:"application/json",
        type:"POST",
        data:JSON.stringify(list),
        success:function (result) {
            console.log(result);
        }
    });
}

后端绑定参数：

@RequestMapping("/acceptList")
@ResponseBody
public String acceptList(@RequestBody List<String> strList){
    System.out.println(strList.toString());
    return strList.toString();
}

2.4.2 方式二

后端传递参数：

var submitList2=function () {
    var list=[];
    list.push("aa3");
    list.push("bb3");
    $.ajax({
        url:"/acceptList",
        data:{datas:list.join()},
        success:function (result) {
            console.log(result);
        }
    });
}

前端传递参数：

@RequestMapping("/acceptList")
@ResponseBody
public String acceptList2(@RequestParam("datas") List<String> strList){
    System.out.println(strList.toString());
    return strList.toString();
}
```javascript

    var list=[];
    list.push("aa3");
    list.push("bb3");
    $.ajax({
        url:"/acceptList",
        data:{datas:list.join()},
        success:function (result) {
            console.log(result);
        }
    });
}

前端传递参数：

@RequestMapping("/acceptList")
@ResponseBody
public String acceptList2(@RequestParam("datas") List<String> strList){
    System.out.println(strList.toString());
    return strList.toString();
}

爱吃西瓜的小秃头

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
ajax的书写方式和数组、map、object、list的前后台传参方式

jqueryAjax(重)同步方式：客户机就要等到服务器返回消息后才去执行其他操作。异步方式：客户机就不等待服务器的响应。注意：这是异步无刷新技术，例如：QQ给别的动态留言，留言完毕后，我们可以看到自己所写的留言，但是这个时候QQ空间并没有刷新。一、ajax 的书写方式1.1 $.ajax({})格式：$.ajax({});参数：type：请求⽅式 GET/POSTurl：请求地址 urlasync：是否异步，默认是 true 表示异步，可以省略不写data：发送到服务器的数据，可以
复制链接

扫一扫