在jsp页面利用ajax传json值到springboot中,并完成页面跳转

碰到的问题:

1,在JSP页面中里面ajax传json值到后台

2,后台收到ajax的值后,根据收到的值做相应的处理后把值传到页面,并完成页面的跳转


之前一直测试不成功,为了排除干扰因为,先用最简单的数据来

 <script  type="text/javascript" src="./js/jquery.min.js" ></script>
    <script  type="text/javascript" src="./js/jquery.json.min.js" ></script>
    <script  type="text/javascript" >
    
        function submitUserList_3() {
        alert("ok");
var params = {};
params.name = "ming123";
params.pwd = "zaq1123";
$.ajax({
type:"post",
//async:false,//不需要
url:"ajax",//次行正确
//data:"name="+name+"&pwd="+pwd,//次行正确,可以把值传到后台
//data:{"name":name , "pwd":pwd},//次行正确,可以把值传到后台
data:params,
success:function(data)
{
alert(data);
window.location.href="${pageContext.request.contextPath}/views/ajax.jsp" ;
//window.location.href="ajax";//这个要配合后台的 可以进行页面跳转,可是后台传递过来的在msg中显示,可是页面无法显示
},
err:function(data)
{
alert("出现异常,异常原因【"+data+"】");
},
complete:function(data)
{
var str=data.responseText
alert("complete【"+str+"】");
}
});
            
        }
    </script>
</head>
<body>
    <h1>submitUserList_3</h1>
    <input id="submit" type="button" value="Submit" onclick="submitUserList_3();">
</body>

</html>

后台 @RequestMapping(value="/ajax" , method=RequestMethod.POST )
@ResponseBody
public String  getAjax(User user)
{
 ModelMap model = new ModelMap();  
                 String name = user.getName();
 String pwd = user.getPwd();
          model.addAttribute("courtName",name);  
          model.addAttribute("courPwd",pwd);  
         return new ModelAndView("ajax",model);

   } 

以上后台可以收到前端发送来的数据,但是在后台运行完后跳入到前端ajax的success函数中去时,后台的数据成功传入

success中的参数data,可是在页面跳转到ajax.jsp页面后,里面的request..getAttribute("courtName") =null

现在传入页面JSON传的前后端代码

<script  type="text/javascript" src="./js/jquery.min.js" ></script>

 <script  type="text/javascript"src="./js/jquery.json.min.js" ></script>

 <script  type="text/javascript">

   function submitUserList_3() {

      alert("ok");

        var customerArray = new Array();

        customerArray.push({name: "李四", pwd: "123"});

        customerArray.push({ name: "张三", pwd: "332"});

       

//因为引用的jquery.json2.4版本,故用函数$.toJSONcustomerArray转换//json的字符串

        var strjson = $.toJSON(customerArray);

        alert(strjson);

        $.ajax({

           type:"post",

           //async:false,//不需要

           url:"ajax",//次行正确  根据web.xmlspring里面的路径配置

            data:strjson,

           datatype:"json",//datatype 注意大小写

           contentType: "application/json;charset=utf-8",//此处不能省略

           success:function(data)

           {

               alert("succes");

//当上面的内容传到后台并成功后进入里面的函数

               alert(data);

window.location.href="${pageContext.request.contextPath}/views/ajax.jsp" ;

               //window.location.href="ajax";//不知道着根据配置着不能完成跳转

           },

           err:function(data)

           {

               alert("出现异常,异常原因【"+data+"");

           },

           complete:function(data)

           {

               //var str=data.responseText

               //alert("complete"+str+"");

           }

        });

        }

    </script>

后端代码

@RequestMapping(value="/ajax" , method=RequestMethod.POST )

@ResponseBody//次行不可以省略,不然ajax收不到后台传来的值  下面的@RequestBody不要忘记,不然收不到ajax传来的数据

publicvoid  getAjax(@RequestBody String myDomain , HttpServletRequest request) throws IOException

     {

         ObjectMapper objectMapper = new ObjectMapper(); 

         JavaType javaType = objectMapper.getTypeFactory().constructParametricType(List.class, User.class); 

        List<User> list = objectMapper.readValue(myDomain, javaType); 

        

         for(inti = 0; i < list.size() ; i++)

         {

         User user = list.get(i);

         String name = user.getName();

            String pwd = user.getPwd();

            System.out.println("进入控制器name="+name);

            System.out.println("进入控制器pwd="+pwd);

         }

         objectMapper.writeValue(System.out, list);

         //中间红色的不要后,ajax可以收到后台传来的值,可是页面跳转不显示,

         //加上中间的红色后,上面@ResponseBody可以不要,同时ajax可以收到后台传来的值,可是页面内容可以显示,

         request.getSession().setAttribute("courtName",myDomain);

}

ajax.jsp页面中不要忘记红色部分,不然页面跳转时null

<%=request.getSession().getAttribute("courtName")%>




猜你喜欢

转载自blog.csdn.net/cateatapple/article/details/80351363