springmvc使用ajax前后端交互的四种形式

最新推荐文章于 2022-10-11 09:04:31 发布

Ulquiorraheng

最新推荐文章于 2022-10-11 09:04:31 发布

阅读量922

点赞数

本文链接：https://blog.csdn.net/Ulquiorraheng/article/details/102853651

版权

若要后台返回对象格式的数据,需要在pom.xml中引入(版本太低会报错)

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.6</version>
</dependency>

controller层代码

@Controller
public class TestController {

    @RequestMapping(value = "/test", method = RequestMethod.GET)
    public String test(){
        return "test";
    }


    @RequestMapping(value = "/post/aaa",method = RequestMethod.POST)
    @ResponseBody
    public ModelAndView aaa(
            @RequestParam("username") String username,
            @RequestParam("password") String password) {
        ModelAndView mv = new ModelAndView(new MappingJackson2JsonView());

        System.out.println(username);
        System.out.println(password);
        mv.addObject("data","chenggong");

        return mv;
    }
    @RequestMapping(value = "/post/bbb")
    @ResponseBody
    public String bbb(HttpServletRequest request, HttpServletResponse response) {
        System.out.println(request.getParameter("username"));
        System.out.println(request.getParameter("password"));

        request.setAttribute("data","ppp");
        return "String";
    }

    @RequestMapping(value = "/post/ccc")
    @ResponseBody
    public Map<String, Object> ccc(@RequestParam Map<String,String> map) {
        System.out.println(map.get("username"));
        System.out.println(map.get("password"));
        Map<String, Object> resultMap = new HashMap<>();
        resultMap.put("jieguo","chenggong");
        return resultMap;
    }
    @RequestMapping(value = "/post/ddd")
    @ResponseBody
    public void ddd(User user, HttpServletResponse response) throws IOException {
        System.out.println(user.getUsername());
        System.out.println(user.getPassword());
        response.getWriter().print("helloworld");
    }




    @RequestMapping("/post/list")
    @ResponseBody
    public List<User> List(){
        List<User> list = new ArrayList<>();
        User u = new User();
        u.setUsername("qqq");
        u.setPassword("eee");
        list.add(u);
        return  list;
    }


}

前端代码

<html>
<head>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>

hello
<input type="button" value="aaa" οnclick="aaa()">
<input type="button" value="bbb" οnclick="bbb()">
<input type="button" value="ccc" οnclick="ccc()">
<input type="button" value="ddd" οnclick="ddd()">
<input type="button" value="eee" οnclick="eee()">
<script>
    function aaa() {
        var field = {"username":"aaa","password":"bbb"};
        $.ajax({
            url:"./post/aaa",
            datatype:"application/json",
            data:field,
            type:"post",
            success:function (data) {
                debugger;
            }
        })
    }
    function bbb(){
        var field = {"username":"aaa","password":"bbb"};
        $.ajax({
            url:"./post/bbb",
            datatype:"json",
            data:field,
            type:"post",
            success:function (data) {
                debugger;
            }
        })
    }
    function ccc(){
        $.ajax({
            url:'./post/ccc',
            type:'post',
            dataType:'json',
            data:{"username":"aaa","password":"bbb"},
            success:function(data){
                debugger;
            }
        });

    }
    function ddd(){
        $.ajax({
            url:"./post/ddd",
            type:"post",
            datatype:"application/json",
            data:{"username":"aaa","password":"bbb"},
            success:function (result) {
                debugger;
            }
        });
    }


    function eee(){
        $.ajax({
            url: "./post/list",//请求地址
            type: "POST",
            dataType: "json",
            success: function(data) {
                debugger;
            }
        });
    }


</script>
</body>
</html>

Ulquiorraheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
springmvc使用ajax前后端交互的四种形式

若要后台返回对象格式的数据,需要在pom.xml中引入(版本太低会报错)<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9...
复制链接

扫一扫