前端接收的json对象取值问题

最新推荐文章于 2025-03-30 19:03:25 发布

有脑子的搬砖工

最新推荐文章于 2025-03-30 19:03:25 发布

阅读量1.3w

点赞数 8

分类专栏：前端和后端交互文章标签：前端接收json对象怎么发送json对象到前端前端接收的json对象的格式如何取出json对象的值

本文链接：https://blog.youkuaiyun.com/qq_43580281/article/details/83985501

版权

前端和后端交互专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种后端与前端交互的方法，重点讲解了如何使用JSON格式进行数据传递，包括数据的构造、发送及前端的接收与解析过程。详细展示了登录验证流程中，后端如何构建并发送JSON数据，以及前端如何使用原生JS和jQuery进行数据接收与处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端给前端发送信息的格式

前端只能接收json对象类型的数据，使用之前先导入阿里巴巴的json的jar包。名字如下图所示，去白百度下载会即可。在这里插入图片描述
阿里巴巴的jar包能把所有类型的数据转换成json对象，但是前端如果想要显示数据，只能接收数组类型的数据。这里我们把数据放在hashmap中，以键值对的形式存储数据。然后把hashmap放在arraylist中，下面是我判断登录的信息的代码。

   String msg ="验证码不正确";
        String c ="";
        //处理数据
        ArrayList<HashMap<String,String>> list = new ArrayList();
        HashMap<String,String> map = new HashMap();
        //查询数据库里面的数据跟前端发送过来的数据是否相同
        User us= new UserImp().queryUser(username);
        //System.out.println(us);
        //登录不成功
        if(us==null){
            c="1002";
             msg="账号不存在";
        }
        if(us!=null){
            if(!us.getPassWord().equals(password)){
                c="1003";
                msg="密码不正确";
            }
        }
        HttpSession session = request.getSession(true);
        String vacode = (String) session.getAttribute("vacode");
        if(vacode.equalsIgnoreCase(code)){
            //跳到主页
            session.setAttribute("User",us);
            c="1001";
        }
        map.put(c,msg);
         list.add(map);
        return JSON.toJSONString(list);
    }

这样后端就把信息发送给了前端。

前端接收数据

前端接收的数据，打印出来是这样的类型，[{},{}].当然，我这里的代码返回去显示的样式是[{}]的，因为我只会返回一个数据。
这里[]代表数组，里面的一个{}代表一个对象。如果用js接收，我们需要先解析json对象。

function onLogin() {
	var span = document.getElementsByClassName("msg")[0];
	var username = document.getElementsByClassName("username")[0].value;
	var password = document.getElementsByClassName("password")[0].value;
	var passcode = document.getElementsByClassName("code")[0].value;
	//console.log(username+" "+password);
	//2.请求
	//创建一个xmlhttprequest对象
	var req = new XMLHttpRequest();
	//设置请求方法 主机地址，是否异步
	req.open("get","login.do?username="+username+"&password="+password+"&passcode="+passcode,true);
	req.send();
	//发送请求
	//req.setRequestHeader("content-type", "application/x-www-form-urlencoded");
	//3.监听状态
	req.onreadystatechange = function() {
		//console.log(req.readyState + " " + req.status);
		if (req.readyState == 4 && req.status == 200) {
			//响应成功
			//console.log(req.responseText); //服务器响应回来的string数据
			//将接收json字符创转成Json对象(只能转数组[])
			var data = req.responseText;
			//console.log(data);
			var obj = eval(data);
			//前端页面跳转到登录页面
				//span.innerHTML=data;
				//console.log(obj[0].code);	
				//console.log(obj[0].msg);
			if(obj[0].code!=1000){
				alert(obj[0].msg);
				return;
}	
				window.location.href = "index.html";
			}
		}
	}

这里eval(data)把它解析成obj对象。obj对象是数组里面加上一个对象，所以取出数组里面的第一个对象，使用对象.属性名取出它们的数据。

使用jquary取出数据

function onLogin() {
    //console.log( $(".username").val());
    $.post("login.do",{"username": $(".username").val(),"password":$(".password").val(),"code":$(".code").val()},function (data){
       for (var key in data[0]){
           if(key=="1001"){
               window.location.href = "index.html";
           }else {
               //alert(data[0][key]);
               $("#msg").html(data[0][key]);
           }
       }
    },"json");

可以使用for in 遍历数组，data[0]是数组里面的第一个对象。取出对象里面的所有key，通过key获取value。
当然，这里面也可以用对象.属性名来取出数据。
比如我有多个对象，由于ArrayList是存取有序的，这样我们可以选取哪个对象，data[i].该对象的属性名，也可以取出值。