得有相关的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都是无效的取值方法~~同学们要引以为戒哦~~~