SpringMVC JSON+Ajax数据

最新推荐文章于 2021-05-21 17:32:20 发布

凌冰_

最新推荐文章于 2021-05-21 17:32:20 发布

阅读量158

点赞数

分类专栏： springmvc

本文链接：https://blog.csdn.net/hlx20080808/article/details/105517167

版权

springmvc 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

(1) 提交页面的数据

(2) 登录效果：

准备环境:

1)pom.xml添加依赖包


    <!--阿里巴巴的jSON -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.28</version>
    </dependency>

2) springmvc.xml添加 -注解JSON转换器

    <!-- 开启注解 -->
    <mvc:annotation-driven>
        <mvc:message-converters>
            <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter" />
        </mvc:message-converters>
    </mvc:annotation-driven>

3)编写json.jsp页面

<head>
    <title>Title</title>
    <link href="css/json.css" rel="stylesheet"/>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/json.js"></script>
</head>
<body>

<div id="msg"> </div>
<form action="">
    <p>用户名：<input type="text" name="uname" id="name" /></p>
    <p>密码：<input type="password" name="upass" id="pwd" /> </p>
    <p> <input type="button" value="测试" onclick="testJson()" /> </p>
</form>
</body>

<head>
    <title>Title</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/json.js"></script>
</head>
<body>

<div id="err"></div>
<form id="frm">
    <p>用户名：
        <input type="text" name="uname"/>
    </p>

    <p>密码：
        <input type="password" name="upass"/>
    </p>

    <p>
        <input type="button" name="sub" value="登录" id="but" />
    </p>
</form>
</body>
</html>

4) JS页面

function testJson(){
    //获得参数值
    var name =$("#name").val();
    var pwd =$("#pwd").val();
   // alert(name+"=>"+pwd);

    //
    $.getJSON("myjson",{"uname":name,"upass":pwd},function(data){
       // alert(data.uname+"==>"+data.upass);
        $("#msg").html(data.uname+"=>"+data.upass).css("background","gray");
    });

}


$(function () {

    //单击事件
    $("#but").click(function () {
        //$("#frm").serialize()提交参数
        $.getJSON("mylogin",$("#frm").serialize(),function (data) {
           // alert(data);
            //清空
            if(data==1){
                $("#err").html("登录成功").css("color","blue");
            }else{
                $("#err").html("登录失败").css("color","red");
            }

        });
    });
});

5) 编写controll

@Controller
public class JsonController {

    @RequestMapping(value = "/myjson")
    @ResponseBody  //返回json
    public User myjson(User user) {
        System.out.println(user);
        // 返回JSON格式的响应
        return user;
    }



    @RequestMapping(value = "/mylogin")
    @ResponseBody  //返回json
    public String mylogin(User user) {
        System.out.println("mylogin==>"+user);
        //判断
        if ("戴洋洋".equals(user.getUname()) && "aaa".equals(user.getUpass())) {
            return "1";        // 返回JSON格式的响应
        } else {
            return "0";
        }

    }
}

说明：

如果请求value/key响应json

@ResponseBody说明将返回的对象转为json对象

@RequestBody说明请求来的是json对象---因发送来的请求时value/key形式，所以不需要写了！

凌冰_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC JSON+Ajax数据

(1) 提交页面的数据(2) 登录效果：准备环境:1)pom.xml添加依赖包  <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifac...
复制链接

扫一扫

专栏目录