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