前端jquery ajax与后端controller交互

一).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";
        }
    }

你可能感兴趣的:(jquery,ajax,javascript)