表中的Ajax和Spring MVC视图列表不起作用 [英] Ajax and Spring MVC view list in a table not working
本文介绍了表中的Ajax和Spring MVC视图列表不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对ajax很陌生。我使用spring mvc，hibernate和Ajax。我的ajax能够坚持数据库，但查看表中的列表不起作用。任何人都可以帮助我。以下是代码片段：
用户点击创建按钮（
创建新客户）然后打开一个模式对话框，并要求用户输入姓名和年龄。一旦点击了模式中的创建按钮，它会调用ajax函数，并且我看到值被持久化为数据库，但无法获取表中的列表。
我的JSP（ajaxExmpl）：
<％@ taglib prefix =formuri =http：// www .springframework.org /标签/形式％>
<％@ page contentType =text / htmlpageEncoding =UTF-8％>
<％@ taglib uri =http://java.sun.com/jsp/jstl/coreprefix =c％>
<％@ taglib prefix =springuri =http://www.springframework.org/tags％>
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 Transitional // ENhttp://www.w3.org/TR/html4/loose.dtd\">
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset =utf-8>
< meta name =viewportcontent =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>
src =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js>< / script>
< script type =text / javascript>
函数doAjaxPost（）{
//获取表单值
var name = $（'＃name'）。val（）;
var age = $（'＃age'）。val（）;
$ .ajax（{
type：POST，
url：createP，
data：name =+ name +& age =+ age ，
success：function（response）{
//我们有回应
alert（'data saved to DB'）;
}
}）;
}
< / script>
< / head>
< body>
< div class =navbar-inner>
< / div>
< a href =＃class =createCustomerdata-toggle =modal
data-target =＃createCustomerModal>创建新客户< / a>
<！ - 表格查看保存在数据库中的列表 - >
< section class =container>
< div class =panel panel-default>
< div class =panel-heading>
< h3>人员列表< / h3>
< / div>
< div class =panel-body>
< table class =table table-striped>
< thead>
< tr>
< th>编号< / th>
< th>名称< / th>
< th>年龄< / th>
< / tr>
< / thead>
< tbody>
< c：forEach var =personitems =$ {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 =buttonclass =btn btn-default dropdown-toggle
data-toggle =dropdown>
操作< span class =caret>< / span>
< / button>
< ul class =dropdown-menurole =menu>
< li>< a>编辑< / a>< / li>
< li>< a href =delete / $ {person.id}>删除< / a>< / li>
< / ul>
< / div>
< / td>
< / tr>
< / c：forEach>
< tbody>
< / table>
< / div>
< / div>
< / section>
<！ - 所有模式对话框都在这一行下面 - >
<！ - 创建客户模式 - >
< div id =createCustomerModalclass =modal faderole =dialog>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
创建新客户
< button type =buttonclass =closedata-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-requiredfor =pool-name>名称：< / label> < / TD>
< td>< input type =textid =nameclass =form-control/>< / td>
< / tr>
< tr valign =top>
< td style =width：25％！important;>< label
class =not-requiredfor =expire-after>年龄：< / label> < / TD>
< td>< input type =textid =ageclass =form-control/>< / td>
< / tr>
< / tbody>
< / table>
< / div>
< div class =modal-footer>
< div>
< input type =submitid =createNewCustomer
onclick =doAjaxPost（）; value =Createclass =btn btn-default/>
< button type =buttonclass =btn btn-defaultdata-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）;
返回redirect：/ listP;
@RequestMapping（value =/ listP，method = RequestMethod.GET）
public String listPerson（Model model）{
model.addAttribute（ person，personService.getAllPersons（））;
返回ajaxExmpl;
解决方案既然你正在使Ajax调用它不刷新页面，因此你新的模型属性没有得到加载。您需要在成功功能中进行部分刷新或整页刷新。对于完全刷新，在成功方法中，通过放置 window.location ='/ CRUDWebUI / listP'
来尝试刷新您的jspI am new to ajax. I am using spring mvc, hibernate and Ajax. My ajax is able to persist to DB but to view the list in the table is not working. Could anyone help me on that. Below is the code snippet:
Once the user click on create button (
Create New Customer) Then a modal dialog opens and the user is asked to put name and age. Once the create button with in the modal is clicked it calls the ajax function and i see the value gets persisted to DB but am not able to get the list with in the table.
my 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>
My Controller:
@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";
}
解决方案 Since you are making Ajax call it was not refreshing the page hence you new model attribute is not getting loaded. You need to do partial refresh or full page refresh in success function. For full refresh, In success method try to refresh your jsp by putting window.location = '/CRUDWebUI/listP'
这篇关于表中的Ajax和Spring MVC视图列表不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
