SSM框架下的简单Ajax应用(附json数据传输乱码解决办法)

使用jquery库中的方式实现异步刷新，注意库的引用地址问题，如果出现了找不到jquery的404错误，首先考虑导入路径问题
$.ajax（{}）含三个参数：

• url 请求地址
• data 这里是使用键值对的方式，包括后台接收到的参数名跟键名相同
• success 执行成功后进行的操作，一般是对获取到的数据进行操作

前端视图的JS代码：

    <script src="js/jquery-3.5.1.js"></script>
    <script>
        function go(){
            $.ajax({
                url:"${pageContext.request.contextPath}/book/test",
                data:{"name":$("#username").val()},
                success:function (data) {
                    alert(data);
                }
            })
        }

        function load() {
            $.ajax({
                url: "${pageContext.request.contextPath}/book/test02",
                data:{},
                success:function (data) {
                    // alert(data[0].bookName);
                    var html="";
                    for (let i = 0; i < data.length; i++) {
                        html +="<tr>"+
                        "<td style=\"text-align: center\">" + data[i].bookID + "</td>"+
                        "<td style=\"text-align: center\">" + data[i].bookName + "</td>"+
                        "<td style=\"text-align: center\">" + data[i].bookCounts + "</td>"+
                        "<td style=\"text-align: center\">" + data[i].detail + "</td>"+
                        +"</tr>";
                    }
                    $("#content").html(html);
                }
            })
        }

        function a1() {
            $.ajax({
                url:"${pageContext.request.contextPath}/book/test03",
                data: {"bookID":$("#bookID").val()},
                success : function (data) {
                    if(data.toString()==="书籍编号正确！"){
                        $("#IDSpan").css("color","green");
                    }else{
                        $("#IDSpan").css("color","red");
                    }
                    $("#IDSpan").html(data.toString());
                }
            })
        }

        function a2() {
            $.ajax({
                url:"${pageContext.request.contextPath}/book/test03",
                data: {"bookName":$("#bookName").val(),"bookID":$("#bookID").val()},
                success : function (data) {
                    if(data.toString()==="书籍名称正确！"){
                        $("#NameSpan").css("color","green");
                    }else{
                        $("#NameSpan").css("color","red");
                    }
                    $("#NameSpan").html(data);
                }
            })
        }
    </script>

然后在控制层编写相应请求处理语句，调用业务层即可：

    @RequestMapping("/test")
    @ResponseBody()
    public void test01(String name, HttpServletResponse rs) throws IOException {
        rs.setHeader("Content-type", "text/html;charset=UTF-8");
        String data = "";
        OutputStream ps = rs.getOutputStream();
        //这句话的意思，使得放入流的数据是utf8格式

        if(name.equals("wang")){
            data="这个人是王";
            ps.write(data.getBytes("UTF-8"));
        }else{
            data="鬼知道这是谁啊";
            ps.write(data.getBytes("UTF-8"));
        }
        ps.close();
    }

    @RequestMapping("/test02")
    @ResponseBody()
    public List<Books> test02() throws IOException {
        List<Books> books = bookService.queryAllBook();
        return books;
    }

    @RequestMapping("/test03")
    @ResponseBody()
    public String test03(int bookID,String bookName){
        String msg="";
        int result = 1;
        if(bookID!=0){
            if(bookService.queryBookById(bookID)!=null){
                msg="书籍编号正确！";
            }else {
                msg="书籍编号不存在！";
            }
        }
        if(bookName!=null){
            if(bookName.equals(bookService.queryNameById(bookID))){
                msg="书籍名称正确！";
            }else {
                msg="书籍名称错误！";
            }
        }
        return msg;
    }

• 注意屏蔽视图解析器的注解使用
• 注意因为前后台数据进行传输，确保本地的jackson的依赖要导入，否则数据无法通过对象–json—js对象的转换

如何解决前后台json数据传输乱码问题

通过加载注解驱动进行配置：

    <mvc:annotation-driven>
        <mvc:message-converters>
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="utf-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

本地所用的jackson依赖：

        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.11.0</version>
        </dependency>