表中的Ajax和Spring MVC视图列表不起作用

Question

我是ajax的新手。 我正在使用spring mvc，hibernate和Ajax。 我的ajax能够持久保存到数据库，但是无法查看表中的列表。 有人可以帮我吗。 下面是代码片段：

一旦用户单击“创建”按钮（“创建新客户”），便会打开一个模式对话框，并要求用户输入姓名和年龄。 一旦在模式中单击带有创建按钮，它将调用ajax函数，我看到该值将持久保存到DB，但无法在表中获取列表。

我的JSP（ajaxExmpl）：

    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8"">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script type="text/javascript">
    function doAjaxPost() {
        // get the form values
        var name = $('#name').val();
        var age = $('#age').val();
        $.ajax({
            type : "POST",
            url : "createP",
            data : "name=" + name + "&age=" + age,
            success : function(response) {
                // we have the response
                alert('data saved to DB');
            }
        });

    }
</script>
</head>
<body>

    <div class="navbar-inner">



    </div>
      <a href="#" class="createCustomer" data-toggle="modal"
        data-target="#createCustomerModal">Create New Customer</a>

<!-- Table to view the list saved in database -->

    <section class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3>Person List</h3>
        </div>
        <div class="panel-body">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>Name</th>
                        <th>Age</th>

                    </tr>
                </thead>
                <tbody>

                    <c:forEach var="person" items="${persons}" varStatus="status">
                        <tr>
                            <td><c:out value="${status.count}" /></td>
                            <td>${person.name}</td>
                            <td>${person.age}</td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default dropdown-toggle"
                                        data-toggle="dropdown">
                                        Actions <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a>Edit</a></li>
                                        <li><a href="delete/${person.id}">Delete</a></li>
                                    </ul>
                                </div>
                            </td>
                         </tr>
                    </c:forEach>
                <tbody>
            </table>
        </div>
    </div>
    </section>



    <!-- All modal dialog goes below this line -->


    <!--create customer modal  -->



    <div id="createCustomerModal" class="modal fade" role="dialog">
        <div class="modal-dialog">


            <div class="modal-content">
                <div class="modal-header">
                    Create New Customer
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">



                    <table class="form-table">
                        <tbody>
                            <tr valign="top">
                                <td style="width: 25% !important;"><label
                                    class="not-required" for="pool-name">Name:</label></td>
                                <td><input type="text" id="name" class="form-control" /></td>
                            </tr>
                            <tr valign="top">
                                <td style="width: 25% !important;"><label
                                    class="not-required" for="expire-after">Age:</label></td>
                                <td><input type="text" id="age" class="form-control" /></td>
                            </tr>

                        </tbody>
                    </table>


                </div>
                <div class="modal-footer">
                    <div>
                        <input type="submit" id="createNewCustomer"
                            onclick="doAjaxPost();" value="Create" class="btn btn-default" />
                        <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
                    </div>

                </div>
            </div>
         </div>
    </div>
</body>
</html>

我的控制器：

@RequestMapping(value="/createP", method=RequestMethod.POST)
public String addPerson(Person person, Model model) {
    personService.addPerson(person);
    return "redirect:/listP";
}

@RequestMapping(value="/listP", method=RequestMethod.GET)
public String listPerson(Model model) {
    model.addAttribute("persons", personService.getAllPersons());
    return "ajaxExmpl";

}

Answer 1

由于您正在进行Ajax调用，因此未刷新页面，因此不会加载新的model属性。 您需要在成功功能中进行部分刷新或整页刷新。 对于完全刷新，在成功方法中，尝试通过放置window.location = '/CRUDWebUI/listP'来刷新jsp window.location = '/CRUDWebUI/listP'

表中的Ajax和Spring MVC视图列表不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-09-07 17:18:13

表中的Ajax和Spring MVC视图列表不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-09-07 17:18:13

解决方案1
0 已采纳 2017-09-07 17:18:13