jQuery，ajax'map传值'与后端'接收map'应用实例(SSM框架)

最新推荐文章于 2021-08-06 01:40:21 发布

PisecesPeng

最新推荐文章于 2021-08-06 01:40:21 发布

阅读量7k

点赞数 2

分类专栏： jQuery 文章标签： jquery ajax 数组传值接收数组 springmvc

本文链接：https://blog.youkuaiyun.com/peng_666666/article/details/78298342

版权

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用jQuery的AJAX方法向后端传递单个数据及数组，并在Spring MVC框架中接收。重点讲解了@RequestMapping的URL匹配、前端数据处理以及后端返回值的使用方法。示例代码帮助理解数据传递过程，对于理解和实践相关技术有指导作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.

向后端传递单个数据，从后端返回Integer类型数据

/**
 * 前端ajax代码部分
 */

var map = '{"account":"' + account + '"}';
//设定一个事件触发ajax
$.ajax({
    type : 'POST',
    contentType : 'application/json;charset=utf-8',
    url : "/",
    processData : false,
    dataType : 'json',
    data : map,
    success : function(data) {
        if(data == 1) {
            $("#text").html('<font color="#000000">aaa</font>');
        } else if(data == 0) {
            $("#text").html('<font color="#000000">aaa</font>');
        } else {
            $("#text").html('<font color="#000000">aaa</font>');
        }
    },
    error : function() {
        $("#text").html('<font color="#000000">aaa</font>');
    }
});

/**
 * 后端controller代码部分
 */

@RequestMapping("/")
public @ResponseBody Integer ajaxDemo(@RequestBody Map map) {
    try {
        //接收前端传递的map
        String str = (String) map.get("account");
        //假设做了一系列操作,判断是否return 0
        if() return 0;
    } catch (Exception e) {
        e.printStackTrace();
    }
    return 1;
}

ps.
1. @RequestMapping(“/”) 要与 ajax的url : “/” 相同，才能数据传递
2. java代码return后，前端的’data‘能接收到后端传来的值，再进行后面操作.
3. 注意，若是没有数据返回，则会执行function(){}操作

2.

向后端传递多个数据，从后端返回数组

/**
 * 前端ajax代码部分
 */

var map = '{"id":"' + $("#id").val() 
            + '","name":"' + name
            + '","price":"' + price
            + '"}';
// 设定一个事件触发ajax
$.ajax({
    type : 'POST',
    contentType : 'application/json;charset=utf-8',
    url : "/",
    processData : false,
    dataType : 'text',
    data : map,
    success : function(data) {
        var users = eval("("+data+")"); 
        var str = "";
        //用循环输出 users, i为index位置, user为每次循环的当前元素
        $.each(users, function (i, user) {  
            str += 'Account: <font size="3"><b>' + user.account + ' </b></font> '
            + ' Name: <font size="3"><b>' + user.name + '</b></font>';
            str += '<a href="/?id='+ user.account + '&name=' + user.name + '" onclick="click();">aaa</a>';
            str += '<hr align="left" width="20%">';
        }); 
        //将 str 在页面中输出
        $("#List").html(str);
    },
    error : function() {
        $("#List").html('');
    }
});

/**
 * 后端controller代码部分
 */

@RequestMapping("/")
public @ResponseBody List<User> ajaxDemo(@RequestBody Map map) {
    List<User> list = null;
    try {
        //接收前端传递的map
        String str = (String) map.get("id");
        String str = (String) map.get("name");
        String str = (String) map.get("price");
        //假设做了一系列操作
    } catch (Exception e) {
        e.printStackTrace();
    }
    return list;
}

ps.
1. @RequestMapping(“/”) 要与 ajax的url : “/” 相同，才能数据传递
2. 前端的’data’接收后端传来的值后，要先用eval(“(“+data+”)”)处理，才可以.each().
3. 本文’操作后端传来数组数据并输出显示在页面‘的方法仅供参考

希望对大家有帮助，
加油互勉 .