个人中心
gpt4 book ai didi

java - 当我尝试保存数据时 Ajax 不工作

转载 作者：太空宇宙 更新时间：2023-11-04 11:40:14 25 4
gpt4 key购买 nike

当我按下保存按钮时，ajax 不起作用。页面重新加载。这是我的 indx 页面和 Controller 功能。网址是 --- http://localhost:8082/spring-test/index

Controller 

@RequestMapping(value = "/saveUser", method = RequestMethod.POST)   
    public String saveUser(@Valid @ModelAttribute("User") User user, BindingResult bindingResult,
             ModelMap model, HttpServletRequest request, RedirectAttributes redirectAttrs) {
        System.out.println("user: " + user.getUserId());
        String type = request.getParameter("update") != null ? request.getParameter("update") : "";
        String delete = request.getParameter("delete") != null ? request.getParameter("delete") : "";
        if (type.equalsIgnoreCase("update") || delete.equalsIgnoreCase("delete")) {
            User userDb = userService.getUserById(user.getUserId());
            user.setUserId(userDb.getUserId());
        }

        if (bindingResult.hasErrors()) {
            System.out.println("=====================error======================" + bindingResult.getFieldErrors());
            return "index";
        }

        if (delete.equalsIgnoreCase("delete")) {
            userService.deleteUser(user.getUserId());
        } else {
            userService.saveUser(user);


        }
        //model.clear();
        model.clear();
        return "redirect:/index";
    }

index.html

<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org" class="no-js">

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
                    $('#myTable').DataTable();
                   $('#btnSave').click(function(e) {
                            var dataUser = $("#name").val();
                            var dataPass = $("#pwd").val();
                            var userDdata = {
                                "name": dateUser,
                                "pass": dataPass
                            }

                            $.ajax({
                                type: "POST",
                                url: "/spring-test/saveUser",
                                data: userData,
                                success: function(response) {
                                    alert(1)
                                },
                                error: function(e) {
                                    alert('Error: ' + e);
                                }
                            });

                        }
                    });
    </script>

</head>

<body>
    <div class="container col-sm-12 col-md-12" style="height:20px;background:#85a3e0;">
    </div>
    <div class="container col-sm-12 col-md-12">
        <h3 class="text-center">Super Admin</h3>

        <div class="col-md-4 col-sm-4" style="margin-left: 6%;">

            <form class="form-horizontal" role="form" th:action="@{/saveUser}" th:object="${user}" method="post">
                <div class="form-group">
                    <label class="control-label col-sm-3" for="pwd">Username:</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="name" placeholder="Enter Name" th:field="*{userName}" />
                        <input type="hidden" th:field="*{userId}" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3" for="pwd">Password:</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="pwd" placeholder="Enter password" th:field="*{password}" />
                    </div>
                </div>

                <div class="form-group">
                    <div class=" col-sm-12 text-right">
                        <button type="submit" class="btn btn-default" name="cancel" value="cancel">Cancel</button>
                        <button id="btnSave" type="submit" class="btn btn-primary" name="save" value="save">Save</button>
                        <button type="submit" class="btn btn-primary" name="update" value="update">Update</button>
                        <button type="submit" class="btn btn-primary" name="delete" value="delete">Delete</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


</body>

</html>

这里有什么问题吗？添加 ajax 函数后，我的 dataTable 也没有出现。

最佳答案

由于您已经有一个用于表单提交的操作( th:action="@{/saveUser}")，因此它将直接发送数据，而不是通过 AJAX。为了使其正常工作，您需要防止这种默认行为，如下所示。

$('#btnSave').click(function(e) {
    e.preventDefault()
    //Then do your stuff
});

关于java - 当我尝试保存数据时 Ajax 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42873943/

25 4 0
文章推荐： java - 检查位置和数据服务是否开启，Android 开发者
文章推荐： html - openlayers map 的全窗口ui View
文章推荐： c++ - qt gui从windows移植到linux
文章推荐： javascript - 具有相同类名的 Div : Select First Child and Set Different CSS Styles for Each
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com