利用form表单和利用ajax提供的JSON格式保存数据的区别（更为标准的前后端分离格式）

最新推荐文章于 2023-11-21 15:27:17 发布

weixin_52904103

最新推荐文章于 2023-11-21 15:27:17 发布

阅读量1.6k

点赞数 9

文章标签： json ajax javascript web

本文链接：https://blog.csdn.net/weixin_52904103/article/details/122370799

版权

1.利用form表单

/bbq-v1/index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表白墙</title>
</head>
<body>
    <div>
        <form method="post" action="/hello/bbq-v1/save">
            <label for="who">谁</label>
            <input type="text" id="who" name="who">
            <label for="target">对谁</label>
            <input type="text" id="target" name="target">
            <label for="what">说什么</label>
            <input type="text" id="what" name="what">
            <button>保存</button>
        </form>

    </div>

    <table border="1">
        <thead>
            <tr>
                <th>谁</th>
                <th>对谁</th>
                <th>说什么</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <!-- script.js 的目标：通过ajax 去后端，查询所有的消息，并展示到tbody中 -->
    <script>
        var tbody = document.querySelector("tbody")
        var xhr = new XMLHttpRequest();
        xhr.open("get", "/hello/bbq-v1/message-list.json");
        xhr.onload = function () {
            var messageList = JSON.parse(xhr.responseText);
            for (var i in messageList) {
                var msg = messageList[i];

                var html = `<tr><td>${msg.who}</td><td>${msg.target}</td><td>${msg.what}</td></tr>`;

                tbody.innerHTML += html;
            }
        }
        xhr.send();

    </script>
</body>
</html>

链接数据库(/bbqv1/DBUtil)(因为会被用到多次，所以单独拿出来，节约数据库被调用的次数)

package com.MXC.servlet.bbqv1;

import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.SQLException;

public class DBUtil {
    public final static DataSource dataSource;

    static {
        MysqlDataSource db = new MysqlDataSource();
        db.setServerName("127.0.0.1");
        db.setPort(3306);
        db.setUser("root");
        db.setPassword("123456");
        db.setDatabaseName("db_12_29");
        db.setCharacterEncoding("utf8");
        db.setUseSSL(false);
        db.setServerTimezone("Asia/Shanghai");

        dataSource = db;
    }

    public static Connection connection() throws SQLException {
        return dataSource.getConnection();
    }
}

数据库内容（/bbqv1/Message）

package com.MXC.servlet.bbqv1;

public class Message {
    public String who;
    public String target;
    public String what;



}

前端设置（/bbqv1/MessageListServlet）

package com.MXC.servlet.bbqv1;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/bbq-v1/message-list.json")
public class MessageListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.从数据库中查询所有的消息
        List<Message> messageList = queryFromDB();
        //2.把消息序列化JSON格式
        String jsonText = toJson(messageList);
        //3.填充响应对象
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json");
        resp.getWriter().println(jsonText);
    }


    // Servlet 对象在Tomcat 内部是单例的
    // 所以 Servlet 对象的属性 om 也只有一份
    private final ObjectMapper om = new ObjectMapper();

    private String toJson(List<Message> messageList){
        try {
            return om.writeValueAsString(messageList);
        } catch (JsonProcessingException exc) {
           throw new RuntimeException(exc);
        }

    }

    private List<Message> queryFromDB() {
        List<Message> messageList = new ArrayList<>();
        try (Connection c = DBUtil.connection()) {
            String sql = "SELECT who, target, what FROM messages ORDER BY id DESC";
            try (PreparedStatement ps = c.prepareStatement(sql)) {
                try (ResultSet rs = ps.executeQuery()) {
                    while (rs.next()) {
                        Message msg = new Message();
                        msg.who = rs.getString("who");
                        msg.target = rs.getString("target");
                        msg.what = rs.getString("what");

                        messageList.add(msg);

                    }
                }
            }
        } catch (SQLException exc) {
            throw new RuntimeException(exc);
        }
        return messageList;
    }
}

后端设置（/bbqv1/SaveServlet）

package com.MXC.servlet.bbqv1;


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;

@WebServlet("/bbq-v1/save")
public class SaveServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.从响应中读取数据
        req.setCharacterEncoding("utf-8");
        String who = req.getParameter("who");
        String target = req.getParameter("target");
        String what = req.getParameter("what");

        //2.保存到数据库当中
        saveToDB(who, target, what);

        //3.重定向回展示页面
        resp.sendRedirect("/hello/bbq-v1/index2.html");
    }

    private void saveToDB(String who, String target, String what) {
        try(Connection c = DBUtil.connection()) {
            String sql = "INSERT INTO messages (who, target, what) VALUES (?, ?, ?)";
            try (PreparedStatement ps = c.prepareStatement(sql)){
                ps.setString(1,who);
                ps.setString(2,target);
                ps.setString(3,what);

                ps.executeUpdate();
            }

        }catch (SQLException exc) {
            throw new RuntimeException(exc);
        }

    }
}

2.利用ajax提供JSON格式保存数据（更为标准的前后分离方案）（相对性能更好）

/bbq-v2/index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表白墙</title>
</head>
<body>
    <div>
        <label for="who">谁</label>
        <input type="text" id="who" name="who">
        <label for="target">对谁</label>
        <input type="text" id="target" name="target">
        <label for="what">说什么</label>
        <input type="text" id="what" name="what">
        <button>保存</button>
    </div>

    <table border="1">
        <thead>
            <tr>
                <th>谁</th>
                <th>对谁</th>
                <th>说什么</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <!-- script.js 的目标：通过ajax 去后端，查询所有的消息，并展示到tbody中 -->
    <script>
        var tbody = document.querySelector("tbody")
        var xhr = new XMLHttpRequest();
        xhr.open("get", "/hello/bbq-v2/message-list.json");
        xhr.onload = function () {
            var messageList = JSON.parse(xhr.responseText);
            for (var i in messageList) {
                var msg = messageList[i];

                var html = `<tr><td>${msg.who}</td><td>${msg.target}</td><td>${msg.what}</td></tr>`;

                tbody.innerHTML += html;
            }
        }
        xhr.send();

        //通过ajax提交JSON数据到后端进行保存，不在使用form表单的形式
        var whoInput = document.querySelector("#who");
        var targetInput = document.querySelector("#target");
        var whatInput = document.querySelector("#what");
        document.querySelector("button").onclick = function() {
            //1. 从input 中读取用户的数据
            var msg = {
                who: whoInput.value,
                target: targetInput.value,
                what: whatInput.value
            };

            whoInput.value = targetInput.value = whatInput.value = '';

            //2.通过ajax发送数据到后端进行保存
            var jsonText = JSON.stringify(msg);

            var xhr = new XMLHttpRequest();
            xhr.open("post", "/hello/bbq-v2/save.json");
            xhr.setRequestHeader("Content-Type", "application/json")
            xhr.onload = function () {
                var result = JSON.parse(xhr.responseText);
                if (result.success === true) {
                    //保存成功，我们在前端，自己更新页面
                    var html = `<tr><td>${msg.who}</td><td>${msg.target}</td><td>${msg.what}</td></tr>`;
                    tbody.innerHTML = html + tbody.innerHTML;
                }

            };
            xhr.send(jsonText);
        };


    </script>
</body>
</html>

链接数据库(/bbqv2/DBUtil)(因为会被用到多次，所以单独拿出来，节约数据库被调用的次数)

package com.MXC.servlet.bbqv2;

import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.SQLException;

public class DBUtil {
    public final static DataSource dataSource;

    static {
        MysqlDataSource db = new MysqlDataSource();
        db.setServerName("127.0.0.1");
        db.setPort(3306);
        db.setUser("root");
        db.setPassword("123456");
        db.setDatabaseName("db_12_29");
        db.setCharacterEncoding("utf8");
        db.setUseSSL(false);
        db.setServerTimezone("Asia/Shanghai");

        dataSource = db;
    }

    public static Connection connection() throws SQLException {
        return dataSource.getConnection();
    }
}

数据库内容（/bbqv2/Message）

package com.MXC.servlet.bbqv2;

public class Message {
    public String who;
    public String target;
    public String what;



}

前端设置（/bbqv2/MessageListServlet）

package com.MXC.servlet.bbqv2;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/bbq-v2/message-list.json")
public class MessageListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.从数据库中查询所有的消息
        List<Message> messageList = queryFromDB();
        //2.把消息序列化JSON格式
        String jsonText = toJson(messageList);
        //3.填充响应对象
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json");
        resp.getWriter().println(jsonText);
    }


    // Servlet 对象在Tomcat 内部是单例的
    // 所以 Servlet 对象的属性 om 也只有一份
    private final ObjectMapper om = new ObjectMapper();
    
    private String toJson(List<Message> messageList){
        try {
            return om.writeValueAsString(messageList);
        } catch (JsonProcessingException exc) {
           throw new RuntimeException(exc);
        }

    }

    private List<Message> queryFromDB() {
        List<Message> messageList = new ArrayList<>();
        try (Connection c = DBUtil.connection()) {
            String sql = "SELECT who, target, what FROM messages ORDER BY id DESC";
            try (PreparedStatement ps = c.prepareStatement(sql)) {
                try (ResultSet rs = ps.executeQuery()) {
                    while (rs.next()) {
                        Message msg = new Message();
                        msg.who = rs.getString("who");
                        msg.target = rs.getString("target");
                        msg.what = rs.getString("what");

                        messageList.add(msg);

                    }
                }
            }
        } catch (SQLException exc) {
            throw new RuntimeException(exc);
        }
        return messageList;
    }
}

后端设置（/bbqv2/SaveServlet）

package com.MXC.servlet.bbqv2;


import com.MXC.servlet.bbqv1.DBUtil;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/bbq-v2/save.json")
public class SaveServlet extends HttpServlet {
    private final ObjectMapper om = new ObjectMapper();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 读取并解析请求体中的JSON格式的消息
        Message message = om.readValue(req.getInputStream(), Message.class);

        //保存打数据库中
        saveToDB(message);

        // 告诉前端返回成功了，通过返回一个固定的JSON数据
        //{success: true}
        Map<String, Object> result = new HashMap<>();
        result.put("success",true);
        String jsonText = om.writeValueAsString(result);

        //发送JSON数据
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json");
        resp.getWriter().println(jsonText);
    }

    private void saveToDB(Message message) {
        try(Connection c = DBUtil.connection()) {
            String sql = "INSERT INTO messages (who, target, what) VALUES (?, ?, ?)";
            try (PreparedStatement ps = c.prepareStatement(sql)){
                ps.setString(1,message.who);
                ps.setString(2,message.target);
                ps.setString(3,message.what);

                ps.executeUpdate();
            }

        }catch (SQLException exc) {
            throw new RuntimeException(exc);
        }
    }


}

3.两者之间的区别

weixin_52904103

关注

9
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
利用form表单和利用ajax提供的JSON格式保存数据的区别（更为标准的前后端分离格式）

1.利用form表单/bbq-v1/index2.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表白墙</title></head><body> <div> <form method="post" action="/hello/bbq-v..
复制链接

扫一扫