SpringMVC和Ajax【数据交互示例】总结

一、什么是Ajax？

• Ajax 即“ A synchronous J avascript A nd X ML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

  Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。

  Ajax 是一种用于创建快速 动态 网页的技术。

  Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

  通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

以上来自百度百科！

二、Ajax传递数据至controller

1、传递单个参数

代码如下：

<script type="text/javascript">
    $(function(){
        $("#userIdcard").blur(function() {
            var userIdcard = $("#userIdcard").val();
            $.ajax({
                url:"../userController/checkUser",
                type:"post",
                data:{userId:userIdcard},
                success:function (data) {
                    //接收单个参数和前端交互
                    //这里做一些你想做的。
                    //data(success中的data)就是后台响应传递来的数据，具体请看接收参数模块
                    if(data){
                        $("#UserError").text("乘车人已存在");
                    }
                },
                error:function () {
                    alert("错误！")
                }
            })
        });
    });
</script>

<input type="text" name="userIdcard" id="userIdcard"><label id="UserError"></label>

//单个参数
@RequestMapping("/checkUser")
@ResponseBody
public boolean checkUser(String userId){
    boolean flag = userService.checkUser(userId);
    return flag;
}

说明：
1、使用前，必须确保jQuery引入成功，

2、传递的参数就是data(Ajax中的属性data)传递的，

3、对于data:{userId:userIdcard}，其中userId，是后台controller接收的参数名称，userIdcard是你要传递的参数。

4、url中的userController是类中的@RequestMapping，controller的@ResponseBody，是controller传递数据到前台的关键，方法checkUser的参数名称和第三点提到的内容一致。

5、我这里给前台的反应是传递flag（布尔类型），success中的data来接收

2、传递多个参数

• 多个简单参数

  $("#button").click(function(){
      var name=$("#userName").val();
      var age = $("#userAge").val();
      var args={userName:name,userAge:age}
      $.ajax({
          url:"<%=basePath%>loginController/register",
          cache:false,
          data:args,
          type:"post",
          success:function(result){
              alert(result.name);
          }
      });
  });  

  @RequestMapping("/register")
  @ResponseBody
  public User register(String userName,String userAge){
      System.out.println(userName+":"+userAge);
      return null;
  }

  说明：
  1、对于var args={userName:name,userAge:age}，其中，userName是实体类对应的字段名(key)，name(value)是上面定义的name本身是通过id获取表达的值)。
  
  2、cache:false是说把Ajax的缓存关掉
  
  3、后台接收，直接使用参数名接收即可（key）

• 多个对象

  $("#button").click(function(){
          var args=[];
          var name=$("#userName").val();
          var age = $("#userAge").val();
          var arg={userName:name,userAge:age}
          //为了方便这里放两个相同的
          args.push(arg);
          args.push(arg);
          $.ajax({
              url:"<%=basePath%>loginController/register",
              cache:false,
              contentType : 'application/json; charset=utf-8',
              data:JSON.stringify(args),
              type:"post",
              success:function(result){
                  alert(result.name);
              }
          }); 
      });

  @RequestMapping("/register")
  @ResponseBody
  public User register(@ResponseBody List<User> list){
          System.out.println(list);
          return list.get[0];//返回第一条记录
      }

  说明：
  1、将数据打包存放到args数组中传递到controller
  
  2、contentType，JSON.stringify(args)，参数前的@ResquestBody，这仨都是必须的

3、传递表单的数据

• 表单以字符串形式传入controller

  <%
      String path = request.getContextPath();
      String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  %>
  
  <script type="text/javascript">
      $(function () {
        $("#btn").click(function () {
            $.ajax({
                url:"<%=basePath%>loginController/register",
                data:$("#register").serialize(),
                type:"post",
                success:function (res) {
                    alert("恭喜你<"+res.userName+">注册成功！);
                },
                error:function () {
                    alert("注册失败！");
                }
            })
        })
      });
  </script>

  @RequestMapping("/register")
  @ResponseBody
  public User register(User user){
      userService.insertUser(user);
      return user;
  }

  说明：
  1、“btn”是表单提交按钮的id，register是表单form的id
  
  2、res是响应后台的数据，具体请看接收数据的内容
  
  3、controller传给前台的是user对象。

• 对象转成 json 传入

  $("#btn").click(function(){
      var name=$("#userName").val();
      var age = $("#userAge").val();
      var args={userName:name,userAge:age}
      $.ajax({
          url:"<%=basePath%>loginController/register",
          cache:false,
          contentType : 'application/json; charset=utf-8',
          data:JSON.stringify(args),
          type:"post",
          success:function(res){
              alert(res.userName);
          }
      }); 
  });

  @RequestMapping("/register")
  @ResponseBody
  public User register(@RequestBody User user){
      userService.insertUser(user);
      return user;
  }

  说明：
  1、使用这种方式，要求ajax提交时加入contentType : ‘application/json; charset=utf-8’
  
  2、要求将字符串转成json格式，JSON.stringify(args),传给data，通过data传入controller
  
  3、对于var args={userName:name,userAge:age}，其中，userName是实体类对应的字段名，name是上面定义的(name本身是通过id获取表达的值)。
  
  4、要求conteroller层接收参数前加入@ResquestBody
  
  5、接收用的是res，其实是data，具体请看接收参数模块

三、Ajax从controller接收数据

• 原始接收数据
  
  • 通过response获取，即response.getWriter.println("单个数据")这种适合接收单个数据(String,boolean,int)，方法返回值为void。

• Ajax接收数据

  • 通过springMVC提供的@ResponseBody

    • 1、接收单个数据
      
      • 单个参数，接收，success中的data封装的就是那个“单个数据”，直接可以做处理

    • 2、接收类对象

      //单个对象
      @RequestMapping("/checkUser")
      @ResponseBody
      public User checkUser(String userId){
          User user = userService.selectUserByIdcard(userId);
          return user;
      }

      <script type="text/javascript">
          $(function(){
              $("#userIdcard").blur(function() {
                  var userIdcard = $("#userIdcard").val();
                  $.ajax({
                      url:"../userController/checkUser",
                      type:"post",
                      data:{userId:userIdcard},
                      success:function (data) {
                          //接收对象和前端交互
                          $("#UserError").text(data.userName);
                      },
                      error:function () {
                          alert("错误！")
                      }
                  })
              });
          });
      </script>

      说明：
      1、使用前，必须确保jQuery引入成功，
      
      2、传递userId，这个属性是为了检查用户的合法性
      
      3、返回user，user是实体类，其中封装了userName等字段，具体代码不再粘贴
      
      4、前端直接data.字段名就可获取user中封装的数据

    • 3、接收list<类>

      //list
      @RequestMapping("/checkUser")
      @ResponseBody
      public List<User> checkUser(String userId){
          User user = userService.selectUserByIdcard(userId);
          List<User> list = new ArrayList<>();
          list.add(user);
          list.add(user);
          return list;
      }

      success:function (data) {
          //接收list
          $.each(data,function (index,res) {
              alert(index+":"+res.userName+":"+res.userAge);
          })
      },

      说明：
      1、这一块省略了数据传入的代码
      
      2、传递的是单个参数userId
      
      3、返回list，里面是user，user是实体类
      
      4、前端通过循环，获取list中的数据，$.each(data,function (index,res)其中data就是接收的list，function中的index是索引（0，1….），res其实是data，为了区别，命名为res，这样就可以res.字段名来获取数据。