Json对象和Json字符串的区别

本文深入讲解了JSON(JavaScript Object Notation)数据格式的概念及其在网页与后端间数据交互的应用,包括JSON对象与字符串的区别、如何使用JSON进行数据传递、解析及处理。通过具体实例,演示了前端使用jQuery进行AJAX请求,将JSON数据发送到后端,并在Java Spring框架中解析这些数据的方法。

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

Json概念

  1. 概念:JSON (JavaScript Object Notation) 一种简单的数据格式,是一种比较轻量级的数据存储格式;

json对象

  1. 比如下面是一个json对象
 - [{"id":1,"brand":"奔驰","color":"黑色","price":"500,000","carnum":"京A88888"}, {"id":2,"brand":"奥迪","color":"黑色","price":"500,000","carnum":"京A66666"}]
 

2.可以用 xxx[i].id 的方式来获取id

json字符串

json的字符串只是在json对象的基础上加了一个 “” 双引号

  • 如下
[{"id":1,"brand":"奔驰","color":"黑色","price":"500,000","carnum":"京A88888"{"id":2,"brand":"奥迪","color":"黑色","price":"500,000","carnum":"京A66666"}]

如果html界面解析的话就需要用eval 使json字符串变成json对象

第一种

转https://blog.youkuaiyun.com/qmdweb/article/details/83017186

页面端


<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	function testSpringParam(){ 
		var name=$("#name").val();
		var email=$("#email").val();	
		
		$.ajax({
		    type: 'POST',
		    url: 'paramurl/paramTest.do' ,		   
		    dataType: 'text',
		    contentType:'application/json;charset=UTF-8',
		     //提交json字符串数组,如果提交json字符串去掉[] 
		    data:JSON.stringify([{'name':name,'email':email}]), 
		    
			success:function(data){
				alert(data);
			},
			error:function(textStatus, errorThrown){
				console.log(textStatus);
				alert(textStatus);
			}
		});
	}
</script>
</head>
<body>
<form action="" id="f1" name="f1">
	<input name="name" id="name"  type="text"  value="zhangsan1"><br>
	<input name="email" id="email" type="text" value="zhangsan@163.com"><br><br>
	<a href="#" onclick="testSpringParam();">测试</a>
</form>
</body>

后台代码


package com.pb.web.controller;
 
import java.util.List;
import java.util.Map;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
 
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
 
@Controller
@RequestMapping("/paramurl")
public class ParamController {
	
	@RequestMapping(value="/paramTest.do",method=RequestMethod.POST)
	@ResponseBody
	public String paramTest(@RequestBody String param){		
		System.out.println(param);
		JSONObject jo=new JSONObject();
		
		//如果页面传的是json字符串,用下列方式解析
//		Map<String, Object> m=(Map<String, Object> )jo.parse(param); //string转map
//		System.out.println(m);//		
//		JSONObject parseObject = jo.parseObject(param); //string转json
//		System.out.println(parseObject);
		
		//如果页面传的是json数组字符串,用下列方式解析
		List<Map> parseArray = jo.parseArray(param, Map.class);
		System.out.println(parseArray); //string转list
		
		JSONArray parseArray2 = jo.parseArray(param);
		System.out.println(parseArray2);
		return "ok";
	}
}

第二种

转 https://my.oschina.net/freegeek/blog/299134

页面

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
	src="<%=basePath%>resources/scripts/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#send").click(function(){
    	var jsondata = $("#jsondata").val();
    	var jsonobj = JSON.parse(jsondata)
    	
    	var callback = function (data) {
    		$("#result").html(JSON.stringify(data))
    	}
    	
		$.postJSON('<%=basePath%>api/user/test', jsonobj, callback)

		});
	})

	$.postJSON = function(url, data, callback) {
		return jQuery.ajax({
			'type' : 'POST',
			'url' : url,
			'contentType' : 'application/json',
			'data' : JSON.stringify(data),
			'dataType' : 'json',
			'success' : callback
		});
	};
</script>
</head>
<body>
	JSON对象
	<br>
	<textarea id="jsondata" cols="60" rows="5">
{"id":2,"gender":0,"mobile":"15072370640","password":"123456","accessToken":"fd6bf3dd3cca4b0ca7c9099447994dba"}
	</textarea><br>

	<button id="send">POST</button><br>

	<font color="red" id="result"></font>
</body>
</html>
spring 客户端
@RequestMapping(value="/test",method=RequestMethod.POST)
public @ResponseBody Map<String, Object> testPostJson(
		@RequestBody  UserForm userForm,
		BindingResult bindingResult) {
		
	Map<String, Object> map = new HashMap<String, Object>();
	if (bindingResult.hasErrors()) {
		map.put("errorCode", "40001");
		map.put("errorMsg", bindingResult.getFieldError().getDefaultMessage());
	}
	
	map.put("user", userForm);
	return map;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值