SpringMVC的Ajax请求实现前后端分离

最新推荐文章于 2024-09-16 09:00:00 发布

水果不是橙子

最新推荐文章于 2024-09-16 09:00:00 发布

阅读量2.1k

点赞数

文章标签： ajax java json spring springmvc

本文链接：https://blog.csdn.net/qq_46341024/article/details/118500686

版权

前后端分离实现

1.实现ajax查询所有数据返回前端

后端页面

/**
 * 将返回的数据放在响应体中；
 * 如果是对象，jackson包自动将对象转为json格式
 * @return
 */
@ResponseBody
@RequestMapping("/ajax")
public List<product> ajaxQuery(){
    List<product> query = productDAO.getQuery();
    return query;
}

前端页面


<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
</head>
<body>
<%
   pageContext.setAttribute("ctp", request.getContextPath());
%>
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<body>
<%=new Date() %>
<a href="${ctp}/ajax" id="ajax">ajax获取所有员工</a><br/>
<div></div>
<%--ajax查询数据--%>
<script type="text/javascript">
    $("#ajax").click(function(){
        //1、发送ajax获取所有员工上
        $.ajax({
            url:"${ctp}/ajax",
            type:"GET",
            success:function(data){
                $("div").empty();
                $.each(data,function(){
                    var empInfo = this.name+"-->"+this.price+"--->"+this.cid+"--->"+this.date;
                    $("div").append(empInfo+"<br/>");
                });
            }
        });
        return false;
    });
</script>
</body>
</html>

2.通过ajax+json前端数据传到后端

<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
</head>
<body>
<%
   pageContext.setAttribute("ctp", request.getContextPath());
%>
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<body>
<%=new Date() %>
<form action="${ctp}/test" method="post" enctype="multipart/form-data">
    <input name="name" value="tomcat" id="name"/>
    <input name="price" value="123456" id="price"/>
    <input type="file" name="file" id="file"/>
    <input type="submit" />
</form
<%--ajax查询数据--%>
<script type="text/javascript">
    $("#ajax").click(function(){
        //1、发送ajax获取所有员工上
        $.ajax({
            url:"${ctp}/ajax",
            type:"GET",
            success:function(data){
                $("div").empty();
                $.each(data,function(){
                    var empInfo = this.name+"-->"+this.price+"--->"+this.cid+"--->"+this.date;
                    $("div").append(empInfo+"<br/>");
                });
            }
        });
        return false;
    });
</script>
<%--前后端分离--%>
<%--ajax后端发送数据--%>
<script type="text/javascript">
    $("a:last").click(function() {

        //点击发送ajax请求，请求带的数据是json
        var emp = {
            name : "sdsd",
            price : 1,
            cid : 2
        };
        // alert(typeof emp);
        // JSON.parse() 把JSON字符串解析为JSON对象
        //JSON.stringify() 用于把JSON对象序列化为JSON字符串。
        var empStr = JSON.stringify(emp);
        // alert(typeof empStr);
        $.ajax({
            url : '${ctp}/testRequestBody',
            type : "POST",
            data : empStr,
            contentType : "application/json",
            success : function(data) {
                alert(data);
            }
        });
        return false;
    });
</script>
</body>
</html>

后端页面

/**
 * json+ajax前后端分离
 * 获取前端数据
 */
@RequestMapping(value = "/testRequestBody",method = RequestMethod.POST)
public String json(@RequestBody product product){
    System.out.println("请求体："+product);
    return "suc";
}

3.其他用法

/**
     * 将返回数据放在响应体中
     * ResponseEntity<String>：响应体中内容的类型
     * @return
     */
    @RequestMapping("/test04")
public ResponseEntity<String> test04(){
//        创建一个头
    MultiValueMap<String, String> headers = new HttpHeaders();
//    实现body的html
    String body = "<h1>哈哈哈</h1>";
//    传入一个Cookie
    headers.add("Set-Cookie", "username=hahahaha");
//    设置编码格式
    headers.set("Content-Type","text/html;charset=UTF-8");
//    返回到页面
    return new ResponseEntity<String>(body , headers, HttpStatus.OK);
}
    /**
     如果参数位置写HttpEntity<String>  str;
     * 比@RequestBody更强，可以拿到请求头；
     *  @RequestHeader("")
     * @param
     * @return
     */
//    @ResponseBody
    @RequestMapping("/test03")
    public String test03(HttpEntity<String>  str){
        System.out.println(str);
        System.out.println(str.getHeaders().get("host"));
        System.out.println(str.getHeaders().get("cache-control"));

        return "suc";
    }
    /**
     * ResponseBody也可以直接传参数
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/test02", produces = "text/html;charset=UTF-8")
    public String test02(){
        return "<h1>哈哈哈<h1>";
    }
   

    /**
     *  @RequestBody:请求体；获取一个请求的请求体
     *  @RequestParam:
     *
     *  @ResponseBody：可以把对象转为json数据，返回给浏览器
     *
     *  @RequestBody：接受json数据，封装为对象
     * @return
     */
    @RequestMapping(value = "/test",method = RequestMethod.POST)
    public String testRequestBody(@RequestBody String product){
        System.out.println("请求体1："+product);
        return "suc";
    }