spring mvc Ajax
我想运行Ajax和showResults。我创建了简单的2个JSP页面,1个CONTROLLER和1个DOMAIN.I使用netbeans.I无法添加用户并查看所有用户列表。spring mvc Ajax
AddUser。 JSP
<script type="text/javascript">
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" >
function doAjaxPost() {
var name = $('#name').val();
var education = $('#education').val();
$.ajax({
type: "POST",
url: "url",
data: "name=" + name + "&education=" + education,
success: function (response) {
$('#info').jsp(response);
$('#name').val('');
$('#education').val('');
},
error: function (e) {
alert('Error: ' + e);
}
});
}
</script>
</head>
<body>
<h1>Add Users using Ajax ........</h1>
<c:url var="user" value="/ShowUsers"/>
<form:form method="POST" modelAttribute="user" action="${user}">
<table>
<tr><td>Enter your name : </td><td> <input type="text" id="name"><br/></td></tr>
<tr><td>Education : </td><td> <input type="text" id="education"><br/></td></tr>
<tr><td colspan="2"><input type="button" value="Add Users" onclick="doAjaxPost()"><br/></td></tr>
<tr><td colspan="2"><div id="info" style="color: green;"></div></td></tr>
</table>
<a href="/ShowUsers">Show All Users</a>
</form:form>`
ShowUsers.jsp
<table>
<tr>
<td>Name</td>
<td>${user.name}</td>
</tr>
<tr>
<td></td>
<td>${user.education}</td>
</tr>
</table>
的web.xml
<servlet>
<servlet-name>UserListController</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>UserListController</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
UserListController-servlet.xml中
<context:component-scan base-package="com.tutorialspoints" />
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
User.java
public class User {
private String name;
private String education;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEducation() {
return education;
}
public void setEducation(String education) {
this.education = education;
}
UserListController.xml
@Controller
public class UserListController {
private final List<User> userList = new ArrayList<User>();
@RequestMapping(value = "/", method = RequestMethod.GET)
public String showForm(Model m) {
m.addAttribute("user", new User());
return "AddUser";
}
@RequestMapping(value = "/AddUser", method = RequestMethod.POST)
public @ResponseBody
String addUser(@ModelAttribute(value = "user") User user, BindingResult result) {
String returnText;
if (!result.hasErrors()) {
userList.add(user);
returnText = "User has been added to the list. Total number of users are " + userList.size();
} else {
returnText = "Sorry, an error has occur. User has not been added to list.";
}
return returnText;
}
@RequestMapping(value = "/ShowUsers", method = RequestMethod.POST)
public String showUsers(@ModelAttribute User user, ModelMap model) {
model.addAttribute("name", user.getName());
model.addAttribute("education", user.getEducation());
return "ShowUsers";
}
}
ShowUsers.jsp
<body>
<table>
<tr>
<td>Name</td>
<td>${user.name}</td>
</tr>
<tr>
<td></td>
<td>${user.education}</td>
</tr>
</table>
</body>
- 传给你的数据作为一个简单的JSON
data: {'name': name, 'education': education}
。 - 更改您的Ajax请求如下
- 你在查询参数字符串格式这是不对的
"name=" + name + "&education=" + education
-
修正网址要传递到服务器指定它们。它应与
xyzabc/AddUser
$.ajax({ type: "POST", url: YOUR_ACTUAL_SERVER_URL, data: {'name': name, 'education', education}, success: function (response) { $('#info').jsp(response); $('#name').val(''); $('#education').val(''); }, error: function (e) { alert('Error: ' + e); } });
Solider。它不工作。当我在URL中使用/ ShowUser时:它显示未找到页面,并且当我单击添加用户时,Ajax也没有更新。 – lavi
好的第一件事的第一件事 - 你能够使用单元测试/邮递员添加用户吗?这是为了确认您的网址是否正常工作 –
什么是你的问题结束? – Janar
@Janar当我单击添加用户时,我想运行更新用户列表大小(如1,2,3等)的Ajax。当我点击ShowUsers(控制器),比显示用户页面显示所有用户名和教育。 – lavi