Controller以整个视图响应AJAX请求

时间:2016-11-26 20:58:01

标签: java jquery ajax spring spring-mvc

我有一个登录表单(在 index.jsp 中),由jQuery的POST函数提交给我的控制器。单击提交按钮后,整个视图将加载到我的错误消息元素中 - 而不是输入到表单输入中的用户名。

我出错的任何想法?任何帮助将不胜感激。

登录表单

<form class="form-inline" id="loginForm" role="form" style="margin-top: 20px">
    <div class="form-group">
        <input type="text" name="username" class="form-control" id="username" placeholder="Enter your username"
            autocomplete="off" autocapitalize="off">
    </div>
    <div class="form-group">
        <input type="password" name="password" class="form-control" id="password" placeholder="Enter your password"
            autocomplete="off" autocapitalize="off">
    </div>
    <div class="form-group">
        <button type="submit" name="loginBtn" class="btn btn-default" id="loginBtn">Log in</button>
    </div>
        <label class="formErrorMsg" id="loginErrorMsg" for="loginBtn"></label>
</form>

login.js

$(document).ready(function(){
    // Check that the login credentials entered are valid
    $("#loginBtn").click(function(){
        event.preventDefault();
        $.post("/login", {username : $("#username").val()}, function(result){
            $("#loginErrorMsg").html(result)
        });
    });
});

indexController的

@Controller
public class IndexController {
    // Map requests for "/" to index.jsp
    @RequestMapping(value = "/")
    public ModelAndView returnIndexPage() {
        ModelAndView model = new ModelAndView("index");
        return model;
    }
    // Map AJAX request, via login form, to login
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    @ResponseBody
    public String checkLoginCredentials(@RequestParam("username") String username){
        return username;
    }
}

弹簧调度-servlet.xml中

<mvc:annotation-driven/>

<mvc:resources mapping="/webjars/**" location="/webjars/"/>
<mvc:resources mapping="/resources/**" location="/resources/" />

<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix">
        <value>/WEB-INF/views/</value>
    </property>

    <property name="suffix">
        <value>.jsp</value>
    </property> 
</bean>

的web.xml

<servlet>
  <servlet-name>spring-dispatcher</servlet-name>
      <servlet-class>
        org.springframework.web.servlet.DispatcherServlet
      </servlet-class>
</servlet>

<servlet-mapping>
  <servlet-name>spring-dispatcher</servlet-name>
      <url-pattern>/</url-pattern>
</servlet-mapping>

1 个答案:

答案 0 :(得分:1)

如果要处理内联表单字段验证,则需要为html <form:errors中的每个字段添加form以进行验证并显示错误消息。

此外,您需要使用控制器方法中的@Valid或自定义验证程序验证数据,以便从表单中返回所有错误,您可以查看herehere实例