春季MVC阿贾克斯

Question

我想运行 Ajax 和 showResults。我创建了简单的 2 个 JSP 页面，1 个 CONTROLLER 和 1 个 DOMAIN。我正在使用 netbeans。我无法添加用户并查看所有用户列表。

添加用户。 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>  

用户.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;
}

用户列表控制器.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>

Answer 1

• 将数据作为简单的 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); } });