【SSM 学习笔记 javaWeb IDEA】ssm的controller 传ModelAndView数据 给前台html的ajax(不用@ResponseBody)

 

得有相关的json JAR包。json-lib和jackson2是不一样的。分清楚。

代码可以完美运行滴,可复制粘贴!前提你的相关配置没有错哦,数据库和后台,前台和后台都要连通。

先看看controller的代码,

我用@RequestMapping+@RequestBody将前台收来的表单数据封装成一个pojo,然后用Mybtis框架去数据库查找对应记录,最后包在ModelAndView里面返回给前端。

package com.ssm.controller;

import com.mysql.cj.xdevapi.JsonArray;
import com.ssm.pojo.userPojo;
import com.ssm.service.userService;
import net.sf.json.JSON;
import net.sf.json.JSONObject;
import net.sf.json.JSONString;
import org.codehaus.jackson.map.util.JSONPObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
//import org.springframework.web.portlet.ModelAndView;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.view.json.MappingJackson2JsonView;
import javax.annotation.Resource;
import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping(value ="/user")
public class userController {
     @Resource
     private userService userService=null;

     @RequestMapping(value = "/test")
     public ModelAndView  findUser2(@RequestBody(required = false) userPojo userPojo) {
          ModelAndView mv = new ModelAndView();
               System.out.println("后台获得的参数\n" + "userName="+userPojo.getUserName()+"\n" + "passWord="+userPojo.getPassWord());
                        //在数据库里找USER
                         userPojo findUser=new userPojo();
                         findUser.setUserName(userPojo.getUserName());
                         findUser.setPassWord(userPojo.getPassWord());
                         findUser.setCity(userPojo.getCity());
                         userPojo foundUser= this.userService.SelectUser(findUser);
               System.out.println("数据库查到了该user\n且数据为"+foundUser.getUserName()+"\t"+foundUser.getPassWord()+"\t在"+foundUser.getCity());
         
 List<userPojo> userPojoArrayList =new ArrayList<userPojo>();
          userPojoArrayList.add(foundUser);
          mv.setView(new MappingJackson2JsonView());
          mv.addObject(foundUser);
          return mv;
          }
 
     }
}


                                                         然后是前台的html表单+ajax请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html表单</title>
    <script  type="text/javascript" src="jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#commit").click(function() {
                // var userName = $("#userName").val();
                // var passWord = $("#passWord").val();  这个一样可以用的
                var data ={
                    userName:$('#userName').val(),
                    passWord:$("#passWord").val(),
                    city:$('#city').val()
                }
                $.ajax({
                    type:'post',
                    url:'./user/test.do',
                    // data: $("#AAFORM").serialize(),
                    // data:JSON.stringify({'userName':userName,passWord:passWord}),
                    data:JSON.stringify(data),
                    dataType:'json',
                    contentType:'application/json;charset=UTF-8',
                    //成功后的方法,返回的是一个modelAndView
                    // 即ModelAndView [view=
                    //      [org.springframework.web.servlet.view.json.MappingJackson2JsonView:[MappingJackson2JsonView]];
                    // model={userPojoList=[com.ssm.pojo.userPojo@39e4b81c]}
                    //                  ]
                    success: function (result){

                        var o1 =JSON.stringify(result);
                        console.log(o1);

                        var o2=result.city;
                        console.log(o2);

                        var o3=$("result.city").val();
                        console.log(o3);

                        var o4=$(result.city).val();
                        console.log(o4);

                        var o5=JSON.parse(result);
                        console.log(o5);

                        var o6=JSON.parse(o1);
                        console.log(o6);

                        // window.location.href="001.html";
                    },
                  error:function () {
                        window.location.href="errorPage.html";
                    }
                })
            })
        })
    </script>
</head>
<body>
<form id="AAFORM">
    用户名:<input type="text" id="userName" ><br>
    密码:<input type="text" id="passWord" ><br>
    city:<input type="text" id="city" ><br>
    <button type="button" id="commit">提交</button>
</form>


</body>
</html>

                                            运行结果~~~~

【SSM 学习笔记 javaWeb IDEA】ssm的controller 传ModelAndView数据 给前台html的ajax(不用@ResponseBody)

我们可以看到o1对象是后台传过来的json数据,但是要注意,后台传来的ModelAndView是设置了json视图滴,

即    mv.setView(new MappingJackson2JsonView());  

且ajax里面的sucess:funtion(result){} 的result是json对象,不是json字符串,所以上图中o5相关的43行语句报错了

所以o1是正常输出的json格式的数据,因为它字符串化了~~

然后o2,o3,o4都是无效的取值方法~~同学们要引以为戒哦~~~

 

最后,根据这篇文章的阅读量再考虑要不要发其他的javaweb相关的学习内容吧~~~

虽然我很菜,但同学们有啥问题可以问我哦~~

上一篇:MVC 顶层设计-ModelAndView


下一篇:详叙spring mvc用法及集成ssm