0
我是新來的AJAX。我使用spring mvc，hibernate和Ajax。我的ajax能夠堅持數據庫，但查看錶中的列表不起作用。任何人都可以幫助我。下面是代碼片段：Ajax和Spring MVC的視圖列表不工作
一旦用戶點擊創建按鈕（ 創建新客戶）然後打開一個模式對話框，並要求用戶輸入姓名和年齡。一旦在該模式的創建按鈕被點擊它調用的AJAX功能，我看到的價值被保存到數據庫，但我不能與表以獲取列表。
我的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">×</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";
}
刷新你的JSP你看到警報「保存到數據庫的數據」，並沒有刷新頁面，你已經給「重定向：/ listP」在addPerson的人打電話？我的理解是，因爲您正在給Ajax調用，所以不會發生頁面刷新，因爲頁面刷新沒有發生，所以您沒有看到表格中的最新數據。 –
是的，我看到數據保存到數據庫和警報以及..當我點擊確定的警報時，我看不到任何東西在頁面上列出，沒有頁面正在刷新 – liz
，你在頁面刷新瀏覽器？ –