【SSM 學習筆記 javaWeb IDEA】ssm的controller 傳ModelAndView資料 給前臺html的ajax（不用@ResponseBody）

我想變白發表於2020-12-08
SSM筆記JavaWebIdeaControllerViewHTML

 

得有相關的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>

                                            執行結果~~~~

我們可以看到o1物件是後臺傳過來的json資料，但是要注意，後臺傳來的ModelAndView是設定了json檢視滴，

即    mv.setView(new MappingJackson2JsonView());  

且ajax裡面的sucess:funtion(result){} 的result是json物件，不是json字串，所以上圖中o5相關的43行語句報錯了

所以o1是正常輸出的json格式的資料，因為它字串化了~~

然後o2,o3,o4都是無效的取值方法~~同學們要引以為戒哦~~~

 

最後，根據這篇文章的閱讀量再考慮要不要發其他的javaweb相關的學習內容吧~~~

雖然我很菜，但同學們有啥問題可以問我哦~~

相關文章