package com.raistudies.domain;public class User {private String name = null;private String education = null;// Getter and Setter are omitted for making the code short
}
package com.raistudies.controllers;import java.util.ArrayList;
import java.util.List;import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;import com.raistudies.domain.User;@Controller
public class UserListController {private List<User> userList = new ArrayList<User>();@RequestMapping(value="/AddUser.htm",method=RequestMethod.GET)public String showForm(){return "AddUser";}@RequestMapping(value="/AddUser.htm",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.htm")public String showUsers(ModelMap model){model.addAttribute("Users", userList);return "ShowUsers";}
}
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1"><title>Add Users using ajax</title><script src="/AjaxWithSpringMVC2Annotations/js/jquery.js"></script><script type="text/javascript">function doAjaxPost() {// get the form valuesvar name = $('#name').val();var education = $('#education').val();$.ajax({type: "POST",url: "/AjaxWithSpringMVC2Annotations/AddUser.htm",data: "name=" + name + "&education=" + education,success: function(response){// we have the response$('#info').html(response);$('#name').val('');$('#education').val('');},error: function(e){alert('Error: ' + e);}});}</script></head><body><h1>Add Users using Ajax ........</h1><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="/AjaxWithSpringMVC2Annotations/ShowUsers.htm">Show All Users</a></body>
</html>
如果您不了解JQuery，可能會(huì)有些困惑。 這是JQuery代碼的說明：
var name = $（'＃name'）。val（）; ：–這里的$是JQuery選擇器，用于選擇HTML中其標(biāo)識(shí)符作為參數(shù)傳遞的任何節(jié)點(diǎn)。 如果標(biāo)識(shí)符是帶有＃的前綴，則意味著它是HTML節(jié)點(diǎn)的ID。 在這里， $（'＃name'）。val（）包含其“名稱”HTML節(jié)點(diǎn)的值。 用戶將在其中輸入其姓名的文本框?yàn)閚ame。 因此Java腳本變量名稱將包含用戶的名稱。
$ .ajax（） ：-是JQuery的$變量中的調(diào)用Ajax的方法。 這里有五個(gè)論點(diǎn)。 首先，“ type ”表示請(qǐng)求的Ajax類型。 它可以是POST或GET。 然后，“ url ”表示將要提交的Ajax提交的URL。 “ data ”將包含要發(fā)送到服務(wù)器的原始數(shù)據(jù)。 如果請(qǐng)求獲得成功并且服務(wù)器向?yàn)g覽器發(fā)送響應(yīng)，則“ 成功 ”將包含必須調(diào)用的功能代碼。 如果請(qǐng)求出現(xiàn)任何錯(cuò)誤，“ error ”將包含必須調(diào)用的功能代碼。
$（'＃info'）。html（response）; ：-將服務(wù)器的響應(yīng)設(shè)置為div。 這樣，“ Hello” +名稱將顯示在ID為“ info ”的div中。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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=ISO-8859-1"><title>Users Added using Ajax</title></head><body style="color: green;">The following are the users added in the list :<br><ul><c:forEach items="${Users}" var="user"><li>Name : <c:out value="${user.name}" />; Education : <c:out value="${user.education}"/></c:forEach></ul></body>
</html>
