сервлеты запросы js

111

11 октября 2019, 20:10

вобщем есть форма, и скрипт который проверяет валидацию введённых данных и если что ругается (выводит алерт) с помощью ajax пытаюсь отправить пост запрос, и всё вроде получается - запрос уходит, пользователь в хешкарту добавляется и выводится в консоль, не могу понять как получить ответ или респонс в формате json да и мне какжется что я как то неправильно отправляю запрос на сервер

мне надо получть пользвателя и добавить его в таблицу

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        function doPOST() {
            if (validate()) {
                $.ajax({
                    type: "POST",
                    url: "./dispatch",
                    // data: {id: $("#id").val()}
                    data: {
                        id: $("#id").val(),
                        surname: $("#surname").val(),
                        name: $("#name").val(),
                        sex: $("#sex").val(),
                        desc: $("#desc").val()
                    },
                    success: function (responce) {
                        var users = JSON.parse(responce);
                        alert(users[0]);
                        $("#table-user tr:last").after("<tr><td>" + users[0].id + "</td><td>" + users[0].surname +
                                        "</td><td>" + users[0].name + "</td><td>" + users[0].sex + "</td><td>" + users[0].desc + "</td></tr>");
                    },
                    // dataType:"json",
                });
                return true;
            } else {
                return false;
            }
        }
        //рефактор скрипта
        function isValid(r, l) {
            var rsl = false;
            if (r.val() == l) {
                rsl = true;
                alert(r.attr("title"));
            }
            return rsl;
        }
        /**
         * проверяет пустые поля или нет, и есть или нет в таблице данный id
         * @returns {boolean}
         */
        function validate() {
            var rsl = false;
            if (isValid($("#id"), "")) {
                rsl = true;
            } else {
                var tableID = document.getElementById("table-user").getElementsByTagName("tr");
                for (var i = 1; i < tableID.length; i++) {
                    if (isValid($("#id"), tableID[i].getElementsByTagName("td")[0].innerHTML)) {
                        rsl = true;
                        break;
                    }
                }
            }
            return !(rsl + isValid($("#surname"), "") + isValid($("#name"), "") + isValid($("#sex"), "") + isValid($("#desc"), ""));
        }
        function addRow() {
            if (validate()) {
                $("#table-user tr:last").after("<tr><td>" + $("#id").val() + "</td><td>" + $("#surname").val() +
                    "</td><td>" + $("#name").val() + "</td><td>" + $("#sex").val() + "</td><td>" + $("#desc").val() + "</td></tr>");
                return true;
            } else {
                return false;
            }
        }
    </script>
</head>
<body>
<div class="container-fluid">
    <h1>My First Bootstrap Page</h1>
    <p>This is some text.</p>
</div>
<div>
    <form class="form-inline" action="/dispatch" method="post">
        <div class="form-group">
            <label for="id">ID:</label>
            <input type="number" class="form-control" title="Error ID. Enter ID." id="id">
        </div>
        <div class="form-group">
            <label for="surname">Фамилия:</label>
            <input type="text" class="form-control" title="Enter surname." id="surname">
        </div>
        <div class="form-group">
            <label for="name">Имя:</label>
            <input type="text" class="form-control" title="Enter name." id="name">
        </div>
        <div class="form-group">
            <label for="sex">Пол:</label>
            <select class="form-control" title="Enter sex." id="sex">
                <option value=""></option>
                <option value="М">М</option>
                <option value="Ж">Ж</option>
            </select>
        </div>
        <div class="form-group">
            <label for="desc">Описание:</label>
            <textarea type="text" class="form-control" title="Enter description." id="desc"></textarea>
        </div>
        <button type="button" class="btn btn-default" onclick="return doPOST();">Submit</button>
    </form>
</div>
<div>
    <table class="table table-bordered" id="table-user">
        <thead>
        <tr>
            <th>ID</th>
            <th>Фамилия</th>
            <th>Имя</th>
            <th>Пол</th>
            <th>Описание</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
</body>
</html>

сервлет:

public class UserIndexJSServlet extends HttpServlet {
    private Dispatch disp = Dispatch.getINSTANCE();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.getRequestDispatcher("/WEB-INF/views/index.html").forward(req, resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        User rsl = disp.submit("add", new User(Integer.valueOf(req.getParameter("id")),
                req.getParameter("surname"), req.getParameter("name"), req.getParameter("sex"), req.getParameter("desc")), new User());
        resp.setContentType("text/json");
        resp.setCharacterEncoding("UTF-8");
        System.out.println(rsl);
        resp.getWriter().write(String.format("{'id':'%s', 'surname':'%s', 'name':'%s', 'sex':'%s', 'desc':'%s'}",
                rsl.getId(), rsl.getSurname(), rsl.getName(), rsl.getSex(), rsl.getDesc()));
//        System.out.println(rsl);
//        req.setAttribute("u", rsl);
//        req.getRequestDispatcher("/WEB-INF/views/index.html").forward(req, resp);
    }
}