WEB应用开发--SpringMVC部分学习(二)--AJAX部分学习

最新推荐文章于 2024-04-24 19:05:11 发布

★愿与愁★

最新推荐文章于 2024-04-24 19:05:11 发布

阅读量543

点赞数 2

分类专栏：笔记文章标签：前端 ajax 学习 spring

本文链接：https://blog.csdn.net/qq_51352148/article/details/123186674

版权

笔记专栏收录该内容

60 篇文章 1 订阅

订阅专栏

Ajax 返回 JSON

@responseBody

@responseBody 注解的作用是将 controller 的方法返回的对象通过适当的转换器转换为指定的格式之后，写入到 response 对象的 body 区，通常用来向异步请求返回 JSON 数据。
注意：在使用此注解之后不会再走视图处理器，而是直接将数据写入到输入流中，他的效果等同于通过 response 对象输出指定格式的数据。

添加 jackson.jar 包

 <!--jackson  对象转json插件-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.1</version>
        </dependency>

登录案例

我们使用搭建好的前端界面利用服务器与后端进行交互

<!DOCTYPE html>
<html>
<head>
<meta   charset="UTF-8"> 
<title>后台管理</title>
<link href="css/login.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        function  login(){
            $.post("login/login",$("#loginForm").serialize(),function(res){
                if (res.code==201){
                    alert(res.msg);
                }else if(res.code==200){
                    alert(res.msg);
                    window.sessionStorage.setItem("account",res.data.account);
                    window.sessionStorage.setItem("newFileName",res.data.newFileName);
                    location.replace("success.html");
                }
            },"json");
        }
    </script>
</head>

<body>
<div class="login_box">
      <div class="login_l_img"><img src="images/login-img.png" /></div>
      <div class="login">
          <div class="login_logo"><a href="#"><img src="images/login_logo.png" /></a></div>
          <div class="login_name">
               <p>后台管理系统</p>
          </div>
          <form method="post" id="loginForm">
             <input name="account" type="text" value="账号">
             <input name="password" type="password" id="password" />
              <input value="登录" style="width:100%;" type="button" onclick="login()">
          </form>
      </div>
      <div class="copyright">某某有限公司 版权所有©2016-2018 技术支持电话：000-00000000</div>
</div>
</body>
</html>

在这里插入图片描述

后端向前端响应数据时,统一数据格式,封装CommonResult类,封装响应结果 code msg data

package com.qn.ssm.common;

/**
 *  结果封装类
 */
public class CommonResult<T> {

      private Integer code;
      private String msg;
      private T data;

    public CommonResult(Integer code, String msg, T data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }
}

LoginController代码

向ajax请求响应数据,springmvc添加@ResponseBody后,将return的对象直接转为json(添加jar包)

package com.qn.ssm.controller;


import com.qn.ssm.common.CommonResult;
import com.qn.ssm.model.Admin;
import com.qn.ssm.service.LoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpSession;


@RestController
@RequestMapping(path = "/login")
public class LoginController {

    @Autowired
    LoginService loginService;

    /*
      登录处理方法

    /*
       向ajax请求响应数据,
       springmvc添加@ResponseBody后,将return的对象直接转为json(添加jar包)
       后端向前端响应数据时,统一数据格式,封装CommonResult类,封装响应结果 code msg data
     */
//登录验证部分代码
    @PostMapping(path = "/login")
    public CommonResult login(Admin admin, HttpSession session){
        CommonResult commonResult = null;
        try {
            Admin admin1 =    loginService.login(admin);
            if(admin1==null){
                commonResult = new CommonResult<Admin>(201,"账号或密码错误" , null);
            }else{
                session.setAttribute("admin",admin1);
            commonResult = new CommonResult<Admin>(200,"登录成功" , admin1);}
        }catch (Exception e){
            e.printStackTrace();
            commonResult = new CommonResult<Admin>(500,"登录失败" , null);
        }
        return commonResult;
    }
    //安全退出部分代码
    @GetMapping(path="/loginOut")
    public void loginOut(HttpSession session){
        session.invalidate();
    }
}

交互过程

前端(login.html)通过触发事件收集表单数据发起post请求开始访问Control层根据请求地址(/login/login)开始执行方法,在Control层利用Service层生成的LoginService对象,进行访问Dao层再通过接口映射实现与数据库信息的访问与交互验证.

简单测试部分

数据库中事先存好的信息

在这里插入图片描述

进行验证

在这里插入图片描述

登录成功跳转页面

★愿与愁★

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WEB应用开发--SpringMVC部分学习(二)--AJAX部分学习

Ajax 返回 JSON@responseBody登录案例交互过程简单测试部分@responseBody@responseBody 注解的作用是将 controller 的方法返回的对象通过适当的转换器转换为指定的格式之后，写入到 response 对象的 body 区，通常用来向异步请求返回 JSON 数据。注意：在使用此注解之后不会再走视图处理器，而是直接将数据写入到输入流中，他的效果等同于通过 response 对象输出指定格式的数据。添加 jackson.jar 包 <!--jack
复制链接

扫一扫