spring mvc 与 jquery ajax

最新推荐文章于 2023-01-05 17:03:33 发布

rambo_china

最新推荐文章于 2023-01-05 17:03:33 发布

阅读量1.6w

点赞数

分类专栏： spring 文章标签： spring mvc jquery function json string

spring 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在 Spring mvc3中，响应、接受 JSON都十分方便。
使用注解@ResponseBody可以将结果（一个包含字符串和JavaBean的Map），转换成JSON。
使用 @RequestBody 注解前台只需要向 Controller 提交一段符合格式的 JSON，Spring 会自动将其拼装成 bean。

Spring这个转换是靠org.codehaus.jackson这个组件来实现的，所有需要引入jackson-core-asl和org.codehaus.jackson两个jar包

<title>Spring MVC</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/user/index.js"></script>
</head>
<body>
<div id="info"></div>
<form action="add" method="post" id="form">
编号：<input type="text" name="id"/>
姓名：<input type="text" name="username"/>
年龄：<input type="text" name="age"/>

<input type="button" value="提交" id="submit"/>
</form>
</body>
</html>

//将一个表单的数据返回成JSON对象
$.fn.serializeObject = function() {
  var o = {};
  var a = this.serializeArray();
  $.each(a, function() {
    if (o[this.name]) {
      if (!o[this.name].push) {
        o[this.name] = [ o[this.name] ];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });
  return o;
};

$(document).ready(
    function() {
      jQuery.ajax( {
        type : 'GET',
        contentType : 'application/json',
        url : 'user/list',
        dataType : 'json',
        success : function(data) {
          if (data && data.success == "true") {
            $('#info').html("共" + data.total + "条数据。<br/>");
            $.each(data.data, function(i, item) {
              $('#info').append(
                  "编号：" + item.id + "，姓名：" + item.username
                      + "，年龄：" + item.age);
            });
          }
        },
        error : function() {
          alert("error")
        }
      });
      $("#submit").click(function() {
        var jsonuserinfo = $.toJSON($('#form').serializeObject());
        alert(jsonuserinfo);
        jQuery.ajax( {
          type : 'POST',
          contentType : 'application/json',
          url : 'user/add',
          data : jsonuserinfo,
          dataType : 'json',
          success : function(data) {
            alert("新增成功！");
          },
          error : function(data) {
            alert("error")
          }
        });
      });
    });

@Controller
@RequestMapping("/user")
public class DemoController {
  private Logger logger = LoggerFactory.getLogger(DemoController.class);

  @RequestMapping(value = "/list", method = RequestMethod.GET)
  @ResponseBody
  public Map<String, Object> getUserList() {
    logger.info("列表");
    List<UserModel> list = new ArrayList<UserModel>();
    UserModel um = new UserModel();
    um.setId("1");
    um.setUsername("sss");
    um.setAge(222);
    list.add(um);
    Map<String, Object> modelMap = new HashMap<String, Object>(3);
    modelMap.put("total", "1");
    modelMap.put("data", list);
    modelMap.put("success", "true");
    return modelMap;
  }

  @RequestMapping(value = "/add", method = RequestMethod.POST)
  @ResponseBody
  public Map<String, String> addUser(@RequestBody UserModel model) {
    logger.info("新增");
    logger.info("捕获到前台传递过来的Model，名称为：" + model.getUsername());
    Map<String, String> map = new HashMap<String, String>(1);
    map.put("success", "true");
    return map;
  }
}

另外一种参数传递方式

前端代码：

	$.ajax({type : "POST",
		   url : "assign.v", 
		   data : {
			   userId : userId,
			   'add[]' : [1,2,3],
			   'del[]' :[4]
		   },
		   success : function (data){
			   searchWidget.searchUser(1);	
	       }
	});

后端代码：

	@ResponseBody
	@RequestMapping(value="/assign",
	        method=RequestMethod.POST) 
	public String assign(
			@RequestParam(value="userId", required=true) int userId,
			@RequestParam(value="add[]", required=false) int[] add,
			@RequestParam(value="del[]", required=false) int[] del) {
		System.out.println("userId:" + userId);
		System.out.println("add:" + add);
		System.out.println("del:" + del);
		return "";
	}

rambo_china

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
spring mvc 与 jquery ajax

在 Spring mvc3中，响应、接受 JSON都十分方便。使用注解@ResponseBody可以将结果（一个包含字符串和JavaBean的Map），转换成JSON。使用 @RequestBody 注解前台只需要向 Controller 提交一段符合格式的 JSON，Spring 会自动将其拼装成 bean。 Spring这个转换是靠org.codehaus.jackson这个组
复制链接

扫一扫