2016-12-02 105 views
0

我想运行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> 
+0

什么是你的问题结束? – Janar

+0

@Janar当我单击添加用户时,我想运行更新用户列表大小(如1,2,3等)的Ajax。当我点击ShowUsers(控制器),比显示用户页面显示所有用户名和教育。 – lavi

回答

0
  • 传给你的数据作为一个简单的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); } });

+0

Solider。它不工作。当我在URL中使用/ ShowUser时:它显示未找到页面,并且当我单击添加用户时,Ajax也没有更新。 – lavi

+0

好的第一件事的第一件事 - 你能够使用单元测试/邮递员添加用户吗?这是为了确认您的网址是否正常工作 –