• spring mvc 与 jquery ajax


    在 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 "";
        }

     

  • 相关阅读:
    vue+element实现图片上传
    react----Hooks的基本使用
    js知识点大杂烩
    vue面试题(一)
    从一个字符串中找出重复次数最多的字符?
    百度搜索
    js--拖拽
    js循环嵌套,打印图形
    js--sort()排序
    闰秒调整扫盲
  • 原文地址:https://www.cnblogs.com/younggun/p/3184808.html
Copyright © 2020-2023  润新知