SpringMVC和Ajax的交互详解(手工处理)-Java开发

Ajax即异步的 JavaScript和XML,是一种无需重新加载整个网页的情况下,能够更新部分模块的网页技术,下面这篇文章主要给大家介绍了关于SpringMVC和Ajax交互的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

一、ajax的实现

ajax异步请求 javaScript and xml 异步请求

1、同步请求和异步请求

1、异步请求特点：请求响应回来页面不动只刷新页面局部
2、同步请求特点：响应回来全部刷新(地址栏，超链接，表单 js的location.href="")
3、通过Ajax发送的请求都是异步请求多请求之间并行处理请求之间不会相互影响

2、Ajax实现异步请求

Ajax发送请求通过js的异步请求对象发送请求 xhr XMLHttpRequest

js实现ajax:

1、创建异步请求对象 xhr
2、准备并且发送请求xhr.open() xhr.send();
3、处理响应
xhr.onreadyStateChang=dunction(){
    if(xhr.readyState==4&&xhr.status==200{
    xhr.responseText
    }
}

4、ajax只认字符串

jquery实现Ajax的封装

$.ajax({}) 基础发送Ajax请求的方式
$.get(url,method,function(){})//get方式发送请求
$.post(url,method,function{},"json")

二、SpringMVC和AJAX交互（手工处理）

控制器使用的json解析工具：阿里巴巴的fastjson

    <!--引入阿里巴巴json解析器fastjson-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.73</version>
    </dependency>

1、案例：使用Ajax形式查询所有用户

（1）交互示意图

（2）ajax页面

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <%--引入js相关的jquery页面--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取单击按钮对象，绑定单击事件
            $("#btn").click(function () {
                //发送get形式的Ajax异步请求
                $.get("${pageContext.request.contextPath}/user/show", function (result) {
                    console.log(result)
                }, "json");
            })
        });

    </script>
</head>
<body>
<input type="button" value="点击查询所有" id="btn">
</body>
</html>

（3）实体类

public class User {
    private Integer id;
    private String Username;
    private String password;
    private Double salary;
    private Date birthday;

（4）Controller以手工转化json

@Controller
@RequestMapping("user")
public class QueryUser {

    @RequestMapping("show")
    public String showUser(HttpServletResponse response) throws IOException {
        User user1 = new User(1,"王恒杰1","123",2000d,new Date());
        User user2 = new User(2,"王恒杰2","123",20000d,new Date());
        User user3 = new User(3,"王恒杰3","123",200000d,new Date());
        User user4 = new User(4,"王恒杰4","123",2000000d,new Date());
        User user5 = new User(5,"王恒杰5","123",20000000d,new Date());
        List<User> users = Arrays.asList(user1, user2, user3, user4, user5);
        //1、将users用户集合转化为json形式字符串
        String jsonUsers = JSONObject.toJSONStringWithDateFormat(users, "yyyy-mm-dd");
        //2、通过响应输出流，响应到客户端
        //设置响应格式
        response.setCharacterEncoding("utf-8");
        response.getWriter().print(jsonUsers);
        return  null;
    }
}

（5）响应到前端中文乱码 Ajax前端页面响应中文乱码

响应之前先设置响应格式：

 //设置响应格式
        response.setCharacterEncoding("utf-8");

解决乱码问题后

三、SpringMVC和AJAX交互（@responseBody注解实现）

1、SpringMVC提供注解：@responseBody

@responseBody:简化返回的数据转化成json串并且通过response响应的回客户端过程

2、使用@ResponseBody替代手工处理（使用Ajax形式查询所有用户）

@Controller
@RequestMapping("user")
public class QueryUser {

    @RequestMapping("show")
    @ResponseBody
    public List<User> showUser(HttpServletResponse response) throws IOException {
        User user1 = new User(1,"王恒杰1","123",2000d,new Date());
        User user2 = new User(2,"王恒杰2","123",20000d,new Date());
        User user3 = new User(3,"王恒杰3","123",200000d,new Date());
        User user4 = new User(4,"王恒杰4","123",2000000d,new Date());
        User user5 = new User(5,"王恒杰5","123",20000000d,new Date());
        List<User> users = Arrays.asList(user1, user2, user3, user4, user5);

        return  users;
    }
}

@ResponseBody替代示意图

3、@responsBody注意事项

（1）@responsBody注解使用的json转化工具不是fastjson,用的是jackjson

    <!--jackson相关依赖 Springmvc@responsBody注解使用jackSon-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.11.3</version>
    </dependency>

（2）@responsBody可以放在返回值前面

（3）设置当前方式的日期转化格式需要使用注解

//jackson SpringMVC内置的
@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
//fastjson 阿里的
@JSONFiled(format="yyyy-mm-dd")

解决办法：在实体类的属性Date加入：@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")

设置后结果：

4、@ResponseBody案例：通过动态获取id查询用户并在页面显示结果

（1）前端页面动态获取id，通过Ajax实现异步传输id值到Controller层

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            $("#del").click(function () {
                $.get("${pageContext.request.contextPath}/user/showById?id=" + $("input[name='id']").val(), function (result) {
                    console.log(result);
                    // 创建ul标签
                    var ul = $("<ul></ul>");
                    //    创建li当前获取到的值
                    var idLi = $("<li>" + result.id + "</li>");
                    var usernameLi = $("<li>" + result.username + "</li>");
                    var passwordLi = $("<li>" + result.password + "</li>");
                    var salaryLi = $("<li>" + result.salary + "</li>");
                    var birthdayLi = $("<li>" + result.birthday + "</li>");
                //    将li子标签添加到ul上
                    ul.append(idLi);
                    ul.append(usernameLi);
                    ul.append(passwordLi);
                    ul.append(salaryLi);
                    ul.append(birthdayLi);
                    $("#body").append(ul)
                }, "json");
            })
        })
    </script>
</head>
<body id="body">

ID：<input type="text" name="id" placeholder="请输入用户的ID">
<input type="button" name="id" value="提交" id="del">
</body>
</html>

（2）控制层java代码

  @RequestMapping("showById")
    public  @ResponseBody User showUserById(HttpServletResponse response,Integer id) throws IOException {

        User user1 = new User(1,"王恒杰1","123",2000d,new Date());
        User user2 = new User(2,"王恒杰2","123",20000d,new Date());
        User user3 = new User(3,"王恒杰3","123",200000d,new Date());
        User user4 = new User(4,"王恒杰4","123",2000000d,new Date());
        User user5 = new User(5,"王恒杰5","123",20000000d,new Date());
        List<User> users = Arrays.asList(user1, user2, user3, user4, user5);
        for (User user : users) {
            if(id.equals(user.getId())){
                return  user;
            }
        }
        return null;

    }

（3）效果展示图