jsp+js+servlet实现前后端分离

微笑伴你而行

已于 2022-10-03 14:31:25 修改

阅读量1.8k

点赞数 2

分类专栏： java EE 文章标签： servlet java javascript

于 2022-10-02 18:57:46 首次发布

本文链接：https://blog.csdn.net/qq_52108058/article/details/127145170

版权

java EE 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

文章目录

一、案例演示

输入账号密码点击提交弹出窗口，首先js获取前端jsp输入账号密码的信息，传递给servlet，返回后回调到js页面，返回结果到jsp页面
在这里插入图片描述

二、代码演示方法一

1、demo01.jsp

<%--
  Created by IntelliJ IDEA.
  User: Dell
  Date: 2022/9/30
  Time: 16:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page isELIgnored= "false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript"></script>
<script type="text/javascript" src="../js/jquery02.js"></script>
<body>

<script type="text/javascript">
    function json(){
        //获取用户名密码
        var username=$("#username").val();
        var password=$("#password").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/testJson",
            type:"post",
            // 通过serialize() 方法，可以对表单内容进行序列化。以键值对的方式进行呈现。
            // 发送的数据
            data:JSON.stringify({username:username,password:password}),
            // 发送的格式
            contentType:"application/json",
            //回调响应的字符串
            dataType:"json",
            success:function (data){
                if (data!=null){
                    alert("账号"+data.username+"密码"+data.password);
                }
            },
            error:function (){
                alert("error");
            }
        })
    }
</script>

<form>
    账号：<input name="username" type="text" id="username"/><br>
    密码：<input name="password" type="text" id="password"/><br>
    <input  type="button" value="测试json交互01" onclick="json()"/>
</form>
</body>
</html>

2、UserController

//@RequestBody的作用是将前端传来的json格式的数据转为自己定义好的javabean对象
//@ResponseBody的作用是将后端以return返回的javabean类型数据转为json类型数据。

@Controller
public class UserController {
    @RequestMapping("/testJson")
    @ResponseBody
    public User testJson(@RequestBody User user){
        System.out.println(user);
        return user;
    }
}

3、User

package com.example.text.vo;

public class User {
    private String username;
    private String password;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

三、代码演示方法二

1、demo02.jsp

<%--
  Created by IntelliJ IDEA.
  User: Dell
  Date: 2022/9/30
  Time: 16:57
  To change this template use File | Settings | File Templates.
--%>
<%@page isELIgnored= "false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="../js/jquery02.js"></script>
<script type="text/javascript" src="../js/js_demo02.js"></script>
<body>


<form id="form">
    账号：<input name="username" type="text" id="username"/><br>
    密码：<input name="password" type="text" id="password"/><br>
    <input  type="button" value="测试json交互02" onclick="json()"/>
</form>
</body>
</html>

2、js_demo02.js

function json(){
    var $form = $('form');
    console.log($form.serialize());
    $.ajax({
        url:"http://localhost:8080/javaee_war_exploded/login",
        // url:$("#PageContext").val()+'/login',
        type:"post",
        // 发送的数据
        // 通过serialize() 方法，可以对表单内容进行序列化。以键值对的方式进行呈现。
        data:$('form').serialize(),
        // 发送的格式
        // contentType:"application/json",
        //回调响应的字符串
        dataType:"json",
        success:function (data){
            if (data!=null){
                alert(data.username);
            }
        },
        error:function (){
            alert("error");
        }
    })
}

3、UserController

@Controller
public class UserController {
    //以前以为在SpringMVC环境中，@RequestBody接收的是一个Json对象，
    // 一直在调试代码都没有成功，后来发现，其实 @RequestBody接收的是一个Json对象的字符串。
    // 然而ajax请求默认传的都是Json对象，后来发现用 JSON.stringify(data)的方式就能将对象变成字符串。
    // 同时ajax请求的时候也要指定dataType: "json",contentType:"application/json"
    // 这样就可以轻易的将一个对象或者List传到Java端，使用@RequestBody即可绑定对象或者Lis
    @RequestMapping("/login")
    @ResponseBody
    public String login(User user) throws JsonProcessingException {
        System.out.println(user);
        //创建Jackson的核心对象ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        //	将obj对象转换成json字符串
        String json = mapper.writeValueAsString(user);
        return json;
    }
}