java - SpringMVC之clientSide view技术处理JsonResponse

标签 java javascript ajax json spring-mvc

我正在尝试在 Spring MVC 中实现以下场景。但我遇到了问题,无法决定正确的方法。 我正在使用 jsonRequest/jsonResone(Restful Webservices)

1.我有一个 SignUP.jsp 表单,其中包含一些需要提交给 Controller 的字段。

 <form method="POST" onsubmit="javascript:signupObj.signup()">
<table>
<tr>
<td>Username : </td>
<td><input  id="username"/></td>
</tr>
<tr>
<td>Password :</td>
<td><input id="password"/></td>

</tr>
<tr>
<td>
<button type="submit">Submit</button>
</td>
</tr>
</table>



</form>

2.onSubmit of form会调用下面提到的注册javascript函数

var signupObj  = {
showSignup : function() {
    //There are Two Ways to Declare Function The Other Way is function showSignup().Checkout the reasons
        $.ajax({
            type: "GET",
            url: "showSignup",
            success: function(response) {
                $("#signupView").html( response );
            }
        });
},
 signup : function() {   
     alert("In Signup function");
     var input = '{';
        input += '"username":"'+$('#username').val()+'",';
        input += '"password":"'+$('#password').val()+'"';
        input += '}';
        alert(input);

     $.ajax({
         type: "POST",
         url : "signup",
         contentType: "application/json; charset=utf-8",
         data: input,
         dataFilter: function (response) {
                return response;
            }, 
        // crossDomain: true,
         async:false,
             success: (function(data) {
                 alert("In ajax Sucess");
                 alert(data.profileID);
                 signupObj.redirectview("success",data);
             }),
                error : function(data,textStatus,error){
                    alert("In ajax Failure");
                     alert(error);
                     signupObj.redirectview("failure",data);
                },
             dataType: "json"
     });
     alert("ajax finished");
 },
 redirectview : function(message,data) {
     alert("inside redirect view");
     if(message == "success"){
         url = "success";
     }
     else{
            url = "error";
         }
      $.ajax({
          type: "POST",
          url : "success",
          contentType: "application/json; charset=utf-8",
          data: data,
          async:false,
          dataType: "json",
         dataFilter: function (response) {
            return response;
        }, 
         // crossDomain: true,
          success: (function(data) {
              alert("data");

          }),
            error : function(data,textStatus,error){
                alert("In ajax Failure redirect");
                 alert(error);
            },

});

};

3.上面的javascript函数对 Controller 进行ajax调用(输入是jsonRequest)

    @RequestMapping(value="/signup",method=RequestMethod.POST)
      @ResponseBody
        public ProfileDTO signup(@RequestBody LoginDTO loginDTO) {
          ProfileDTO profileDto = new ProfileDTO();
//In case no errors in backend logic
          profileDto.setError(null);
          profileDto.setProfileID("profileID");
          profileDto.setProfileName("profileName");
          System.out.println("Submitting SignUP Form Will Return ProfileID");
            return profileDto;

        }
//Below method is for success view
    @RequestMapping(value="/success",method=RequestMethod.POST)
    @ResponseBody
    public String checkSignup(@RequestBody ProfileDTO profileDto,HttpServletRequest httprequest,HttpServletResponse httpResponse
            ) {
        //model.addAttribute(loginDTO);
    System.out.println("In loginSuccess");
        return "loginSucess";
    }

4.Controller给出profileDTO的JSON Response。现在基于 profileDTO.getErrors 我必须调用 loginSuccess.jsp 或 loginFailure.jsp

现在我的问题是:

1) 我如何在 ajax 调用中使用 jsonResponse 重定向到 loginSuccess.jsp 或 loginFailure.jsp,以及如何将我的 profileDTO 数据传递到 loginSuccess View 。

2.)请建议我应该遵循的最佳实践。

最佳答案

1.) 首先你可以像下面这样在javascript中减少你的代码,直接序列化表单对象。

var signupObj  = {

 signup : function() {   
     alert("In Signup function");
        $.ajax({
         type: "POST",
         url : "signup",
         data: $('#myForm').serialize(),// add "myForm" as the form id 
         async:false,
             success: (function(data) {
                 alert("data"+data);
                 redirectView("success",data);

             })
             error : function(data, textStatus, errorThrown) {
                    alert(error_occured);
                    redirectView("error",data);
                }
     });
 }

 };


 <script
 function redirectView(message,data){

 var url = "";
 if(message == "success"){
    url = "/success";
 }else{
    url = "/error";
 }

     $.ajax({
                    type: "POST",
                    url : url,
                    data: data 
                    async:false,
                    success: (function(data) {
                        alert("data"+data);

                    })
                    error : function(data, textStatus, errorThrown) {
                        alert(error_occured);
                    }
     });
 }
 </script>

2.) 从 Controller 本身重定向successfailure View 。

3.) 将我的 profileDTO 数据传递给 loginSuccess View 。

Spring MVC,从第 3 版开始,允许您使用 Controller 中的 @ResponseBody 注释返回直接转换为 JSON 的对象,如此处所示

 @RequestMapping(value="/signup",method=RequestMethod.POST)
          @ResponseBody
            public ProfileDTO signup(@ModelAttribute("LoginDTO") LoginDTO loginDTO,BindingResult bindingResult) {
              ProfileDTO profileDto = new ProfileDTO();
    //In case no errors in backend logic
              profileDto.setError(null);
              profileDto.setProfileID("profileID");
              profileDto.setProfileName("profileName");
              System.out.println("Submitting SignUP Form Will Return ProfileID");

             return profileDto;


            }

如果从 Controller 转发

前缀为forward, Spring 将获取指定路径的RequestDispatcher 并转发给它。该过程的一部分将包括从为该请求处理周期创建的 ModelAndView 中获取模型,并将其所有属性放入 HttpServletRequest 属性中。

Servlet 容器将采用 RequestDispatcher#forward(..) 并再次使用您的 DispatcherServlet 来处理它。您的 DispatcherServlet 将为这个处理周期创建一个带有新模型的新 ModelAndView。因此,此模型不包含之前的任何属性,但 HttpServletRequest 属性包含。

在你的情况下,这个

modelMap.put("key", "value");

最终会在

HttpServletRequest request = ...;
request.getAttribute("key");

关于java - SpringMVC之clientSide view技术处理JsonResponse,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25475023/

相关文章:

JavaScript getter 返回 promise 值

javascript - Jquery、Ajax 未触发正确的 php 函数

javascript - 从 AJAX laravel 获取 http ://localhost/scl-mgt-update/fetch? type=teacher 500(内部服务器错误)

java - 计算 Java 类的代码行数

java - Spring 3 MVC session 变量的生存时间是多久?

javascript - Angular 2为每个数组对象添加键和值

Javascript/AJAX/使用 JSON 发送到服务器文本和文件

java - 如何在 hibernate 查询中使用嵌套属性作为命名参数?

java - 使用 ImageIO.write 时出现 OutOfMemory

javascript - 在 Protractor 测试中使用外部测试数据