Java 当我试图保存数据时，Ajax不起作用_Java_Jquery_Ajax_Spring Mvc_Thymeleaf

Java 当我试图保存数据时，Ajax不起作用

java jquery ajax spring-mvc

Java 当我试图保存数据时，Ajax不起作用,java,jquery,ajax,spring-mvc,thymeleaf,Java,Jquery,Ajax,Spring Mvc,Thymeleaf,当我按下保存按钮时，ajax无法工作。页面将重新加载。这是我的indx页面和我的控制器功能。 URL是-- 控制器 @RequestMapping(value = "/saveUser", method = RequestMethod.POST) public String saveUser(@Valid @ModelAttribute("User") User user, BindingResult bindingResult, ModelMap mod

当我按下保存按钮时，ajax无法工作。页面将重新加载。这是我的indx页面和我的控制器功能。 URL是--

控制器

@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>


$（文档）.ready（函数（）{
$（'#myTable'）.DataTable（）；
$（'#btnSave'）。单击（函数（e）{
var dataUser=$（“#name”）.val（）；
var dataPass=$（“#pwd”）.val（）；
var userDdata={
“名称”：日期用户，
“通行证”：数据通行证
}
$.ajax({
类型：“POST”，
url:“/spring test/saveUser”，
数据：userData，
成功：功能（响应）{
警报（1）
},
错误：函数（e）{
警报（'错误：'+e）；
}
});
}
});
超级管理员
用户名：
密码：
取消
拯救
更新
删除

这里有什么问题。

添加ajax函数后，我的数据表也不会出现。

它不工作，因为您有“提交”按钮，它直接提交表单

只需从按钮中删除

type=“submit”

，然后重试即可

Vinod不起作用，因为您有“提交”按钮，它直接提交表单

只需从按钮中删除

type=“submit”

，然后重试即可

Vinod

试试下面的方法

    <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 userData = $("#form1").serializeArray();    
                                $.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" id="form1" 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>


                </form>
 <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="button" 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>
            </div>
        </div>


    </body>

    </html>


$（文档）.ready（函数（）{
$（'#myTable'）.DataTable（）；
$（'#btnSave'）。单击（函数（e）{
var userData=$（“#form1”）.serializeArray（）；
$.ajax({
类型：“POST”，
url:“/spring test/saveUser”，
数据：userData，
成功：功能（响应）{
警报（1）
},
错误：函数（e）{
警报（'错误：'+e）；
}
});
}
});
超级管理员
用户名：
密码：
取消
拯救
更新
删除

试试下面的方法

    <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 userData = $("#form1").serializeArray();    
                                $.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" id="form1" 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>


                </form>
 <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="button" 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>
            </div>
        </div>


    </body>

    </html>


$（文档）.ready（函数（）{
$（'#myTable'）.DataTable（）；
$（'#btnSave'）。单击（函数（e）{
var userData=$（“#form1”）.serializeArray（）；
$.ajax({
类型：“POST”，
url:“/spring test/saveUser”，
数据：userData，
成功：功能（响应）{
警报（1）
},
错误：函数（e）{
警报（'错误：'+e）；
}
});
}
});
超级管理员
用户名：
密码：
取消
拯救
更新
删除

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

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

由于表单提交已经有一个操作（th:action=“@{/saveUser}”），