前端jquery ajax与后端controller交互

最新推荐文章于 2022-01-11 09:22:01 发布

没有刘海的俊杰

最新推荐文章于 2022-01-11 09:22:01 发布

阅读量675

点赞数

文章标签： jquery ajax javascript

本文链接：https://blog.csdn.net/weixin_43401042/article/details/113359240

版权

一）.get请求

1.1 实体封装

前端：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>-->
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <form action="##">
        用户名：<input name="username">
        密码： <input name="password">
            <button type="button">提交</button>
    </form>

</body>
<script>

    $('button').on('click',function () {
        let username = $('input:first').val();
        let password = $('input:nth-child(2)').val();
        let data = {
            username:username,
            password:password
        }
        $.ajax({
            url:'/getMethod',
            data: data,
            type:'GET',
            success:function (res) {
                console.log(res)
            }
        })
    })
</script>
</html>

后端：


@Data
public class User {
    private String username;
    private String password;
}




@Controller
public class JqueryTest {

    @GetMapping("/getMethod")
    @ResponseBody
    public String getMethod(User user){
        if(user!=null)
        {
            return "success";
        }
        else {
            return "fail";
        }
    }
}

1.2 用@RequestParam注解接收

   @GetMapping("/getMethod2")
    @ResponseBody
    public String getMethod2(@RequestParam("username") String username,
                             @RequestParam("password") String password){
        if(!(StringUtils.isEmpty(username)&&StringUtils.isEmpty(password))){
            return "success";

        }else {
            return "fail";
        }
    }

二）.post请求

2.1实体封装

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>-->
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <form action="##">
        用户名：<input name="username">
        密码： <input name="password">
            <button type="button">提交</button>
    </form>

</body>
<script>

    $('button').on('click',function () {
        let username = $('input:first').val();
        let password = $('input:nth-child(2)').val();
        let data = {
            username:username,
            password:password
        }
        $.ajax({
            url:'/postMethod',
            data: data,
            type:'POST',
            success:function (res) {
                console.log(res)
            }
        })
    })
</script>
</html>

后端

	@PostMapping("/postMethod")
    @ResponseBody
    public String postMethod(User user){
        if(user!=null)
        {
            return "success";
        }
        else {
            return "fail";
        }
    }

2.2 json格式

前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>-->
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <form action="##" >
        用户名：<input name="username">
        密码： <input name="password">
            <button type="button">提交</button>
    </form>

</body>
<script>

    $('button').on('click',function () {
        let username = $('input:first').val();
        let password = $('input:nth-child(2)').val();
        let data = {
            username:username,
            password:password
        }



        $.ajax({
            url:'/postMethod',
            data: JSON.stringify(data),//将对象转成json字符串
            contentType:'json/application;charset=utf-8',
            type:'POST',
            success:function (res) {
                console.log(res)
            }
        })
    })
</script>
</html>

后端：

  @PostMapping("/postMethod")
    @ResponseBody
    public String postMethod(@RequestBody String user){
        //将json字符串转换成json对象
        JSONObject userJson = JSONUtil.parseObj(user);
        if(user!=null)
        {
            return "username:"+userJson.getStr("username")+"\n"
                    +"password:"+userJson.getStr("password");
        }
        else {
            return "fail";
        }
    }