JSON数据交互

最新推荐文章于 2024-07-09 22:37:40 发布

笔和墨

最新推荐文章于 2024-07-09 22:37:40 发布

阅读量453

点赞数 3

分类专栏： SpringMVC 文章标签： JSON数据交互 json交互 json数据同步

本文链接：https://blog.csdn.net/hexinghua0126/article/details/79081900

版权

SpringMVC 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、服务端向客户端返回json数据，需要在对应的方法上加上注解：@ResponseBody,可以将POJO转换为JSON对象传递给客户端。

二、必须先导入json包，三个Json包版本号必须一致。

 <!--json包-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.7.5</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.7.5</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.7.5</version>
    </dependency>

三、控制层（controller）创建一个类：LoginController.java

/**
 *控制层
 */
@Controller
@RequestMapping(value = "r")
public class LoginController {

    @RequestMapping(value = "register")
    @ResponseBody //服务端向客户端返回json数据
    public Result login(String userName) {

        Result result = new Result();
        if ("张三".equals(userName)) {
            result.setState(true);
            result.setMessage("您输入对了！");
            return result;
        }
        result.setState(false);
        result.setMessage("您输错了！");
        return result;
    }

}

四、创建一个静态页面 register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/register.js"></script>
    <link rel="stylesheet" type="text/css" href="css/register.css" >

</head>
<body>
用户名：<input class="userName">
<span class="info"></span>
</body>
</html>

五、创建一个register.js文件

/**
 *注册表单验证
 */
$(document).ready(function () {

     $(".userName").keyup(function () {
             $.post(
                 "r/register",
                 {
                    "userName":$(this).val()
                 },
                 function(data){
                    console.log(data.message);
                     $(".info").text(data.message);
                    if(data.status){
                        $(".info").removeClass("green");
                        $(".info").addClass("red");
                    }else {
                        $(".info").removeClass("red");
                        $(".info").addClass("green");
                    }

                 });
         });

     })

六、运行结果如下

笔和墨

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JSON数据交互

一、服务端向客户端返回json数据，需要在对应的方法上加上注解：@ResponseBody,可以将POJO转换为JSON对象传递给客户端。二、必须先导入json包，三个Json包版本号必须一致。 com.fasterxml.jackson.core jackson-annotations 2.7.5 com.f
复制链接

扫一扫

专栏目录