时间戳

首页 > 解决方案 > 无法访问的 JS 部分

javascript - 无法访问的 JS 部分

问题描述

我有一个表格，一个控制器和 JS 部分。由于某些原因（我不知道为什么），它没有看到 JS 部分。也许有人可以帮助我解决问题。

形式如下：

<head>
    <title>Cabinet</title>
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
  <form accept-charset="UTF-8" role="form">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="worker name" name="worker-name" type="text"
                                       id="name">
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="worker title" name="worker-title"
                                       type="text" id="title">
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="worker salary" name="worker-salary"
                                       type="number" id="salary">
                            </div>
                            <input class="btn btn-lg btn-success btn-block" type="submit" value="CREATE"
                                   id="createWorker">
                        </fieldset>
                    </form>
                </div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script
        src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
<script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/createWorker.js"></script>
</body>
</html>

控制器。logger.info没有显示在控制台上。

@WebServlet ("/worker")
public class WorkerController extends HttpServlet {

    private WorkerService workerService;
    private static final Logger logger = Logger.getLogger(WorkerController.class);

    public WorkerController() {
        workerService = new WorkerServiceImpl();
    }

    @SneakyThrows
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  logger.info("TEST");
        String name = req.getParameter("workerName");
        String title = req.getParameter("workerTitle");
        int salary = Integer.parseInt(req.getParameter("workerSalary"));

        Worker worker = new Worker(name, title, salary);
        logger.info("POST /worker request: " + worker);
        workerService.create(worker);
        //TODO : create handler (bootstrap component) if product is created
        resp.setContentType("text");
        resp.setCharacterEncoding("UTF-8");
        resp.getWriter().write("Success");
    }
}

在这个 JS 部分console.log 是空的

$(document).ready(function () {
    $("button#createWorker").click(function () {
        var name = $("form input.name").val();
        console.log(name);
        var title = $("form input.title").val();
        console.log(title);
        var salary  = $("form input.salary").val();
        console.log(salary);
        if (name == '' || title == '' || salary == '') {
            alert("Please fill all fields...!!!!!!");
        } else {
            var worker = {
                workerName: name,
                workerTitle: title,
                workerSalary: salary
            };
            $.post("worker", worker, function (data) {
                if (data === 'Success') {
                    $("form")[0].reset();
                }
            });
            alert("Worker:" + worker.workerName + " was created")
        }
    });
});

标签： javascript

解决方案

那是因为您的 css 选择器是错误的。您已经id在这些字段上有 s，尝试按 id 选择：

$(document).ready(function () {
    $("button#createWorker").click(function () {
        var name = $("#name").val();
        console.log(name);
        var title = $("#title").val();
        console.log(title);
        var salary  = $("#salary").val();
        console.log(salary);
        if (name == '' || title == '' || salary == '') {
            alert("Please fill all fields...!!!!!!");
        } else {
            var worker = {
                workerName: name,
                workerTitle: title,
                workerSalary: salary
            };
            $.post("worker", worker, function (data) {
                if (data === 'Success') {
                    $("form")[0].reset();
                }
            });
            alert("Worker:" + worker.workerName + " was created")
        }
    });
});

推荐阅读