问题:写项目时,难免会遇到前台和后台要进行数据交换,往前台传一个对象或一个对象集,往后台传一个对象,一个对象集。怎么传,你当然不能直接去传递一个对象或对象集,我们可以利用JSON数据相互之间传值。

Json在跨域之间传数据也非常方法,这是它的优点。

你需要知道:传递数据我们用JSON,JSON,JSON,前台传递JSON数据格式到后台,后台需要反序列化。后台传前台,需要序列化后传。

简单了解  JSon数据。

Json语法:

在 JS 语言中,一切都是对象。因此,任何支持的类型都可以通过 JSON 来表示,例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型:
  • 对象表示为键值对
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

JSON 键/值对

JSON 键值对是用来保存 JS 对象的一种方式,和 JS 对象的写法也大同小异,键/值对组合中的键名写在前面并用双引号 "" 包裹,使用冒号 : 分隔,然后紧接着值:
{"firstName": "John"}
这很容易理解,等价于这条 JavaScript 语句:
{firstName = "John"}
 
 
最容易误解的就是Json和JS里面的对象了
JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。
知道了这一点区分JSON和JS对象就很简单了。
例如:
  1. <script>
  2. var obj = { a: 'Hello', b: 'World' }; //这是一个对象,注意键名也是可以使用引号包裹的
  3. var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串,本质是一个字符串
  4. console.log(obj);
  5. console.log(obj.a);//JS对象可以直接用
  6.  
  7. console.log(json); //就是一个字符串
  8. console.log(json.a); //JSON格式不好直接用,需要转型
  9. </script>

 JS自带方法可以让我们再JSON和对象之间相互转换
  1. <script>
  2. // 要实现从对象转换为 JSON 字符串,使用 JSON.stringify() 方法:
    //序列化
  3. var json = JSON.stringify({ a: 'Hello', b: 'World' }); //结果是 '{"a": "Hello", "b": "World"}'
  4. console.log(json);
  5. // 要实现从 JSON 转换为对象,使用 JSON.parse() 方法:
    //反序列化
  6. var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
  7. console.log(obj);
  8. </script>

  1. <script>
  2. //表示对象
  3. // JSON最常用的格式是对象的 键值对。例如下面这样:
  4. var dd = { "firstName": "Brett", "lastName": "McLaughlin" };
  5. console.log(dd.firstName);
  6. // 表示数组
  7. //和普通的 JS 数组一样,JSON 表示数组的方式也是使用方括号 []
  8. var ff = {
  9. "people": [{
  10. "firstName": "Brett",
  11. "lastName": "McLaughlin"
  12. },
  13. {
  14. "firstName": "Jason",
  15. "lastName": "Hunter"
  16. }
  17. ]
  18. };
  19. console.log(ff.people[].firstName);
  20. </script>

配合Aajx。

一条数据:

后台返回JSon数据,前台用

①字符串

  1. <script>
  2. $.ajax({
  3. type: "Post",
  4. url: "GetJson.ashx",
  5. data: "",
  6. dataType: "json", //既然用到json,你就规定数据类型为json格式的
  7. async: true,
  8. success: function (data) {
  9. console.log(data);
  10. console.log(data.Name);
  11. }
  12. })
  13. </script>
  1. public void ProcessRequest(HttpContext context) //一般处理程序
  2. {
  3. context.Response.ContentType = "text/plain";
  4. //返回JSon格式数据
  5. string aa = "{\"Name\":\"李某\",\"Age\":\"18\"}"; //json格式必须为这个
  6. context.Response.Write(aa); //这里返回JSon数据,前台接受变成了Object,如果前台是string类型就转成对象。
    }

如果我们的JSON字符串很复咋,这样写字符串不太好。

②自带命名空间序列化

  1. context.Response.ContentType = "text/plain";
  2. //可以序列化和反序列化
  3. JavaScriptSerializer json = new JavaScriptSerializer();
  4. FunctionDemo.Model.Users usModel = new FunctionDemo.BLL.Users().GetModel();
  5. context.Response.Write(json.Serialize(usModel));
  1. $.ajax({
  2. type: "Post",
  3. url: "GetJson.ashx",
  4. data: "ob="+JSON.stringify(ob)+"&js="+js,
  5. dataType: "json",
  6. async: true,
  7. success: function (data) {
  8. console.log(typeof (data));
  9. console.log(data);
  10. alert(data.LoginName);
  11. },
  12. error: function () {
  13. alert(" 错了");
  14. }
  15. })

③借助我们的     这个dll    ———>      下载地址

  1. public void ProcessRequest(HttpContext context)
  2. {
  3. context.Response.ContentType = "text/plain";
  4. ////返回JSon格式数据
  5. // string aa = "{\"Name\":\"李某\",\"Age\":\"18\"}"; //json格式必须为这个
  6. //context.Response.Write(aa); //这里返回JSon数据,前台接受变成了Object
  7. //可以把一张表的字段和值这样写
  8. JsonData jd = new JsonData(); JsonData.doc介绍
  9. jd["Name"] = "李某";
  10. jd["Age"] = ;
  11. context.Response.Write(jd.ToJson()); //这个跟上面的字符串JSon效果是一样的 可以简化我们的JSon字符串
  12. }

可以返回嵌套的

  1. //返回JSon格式数据
  2. string aa = "{\"Name\":\"李某\",\"Age\":\"18\",\"Love\":[{\"one\":\"运动\",\"two\":\"哦哦\"},{\"one\":\"看电影\"}]}"; //json格式必须为这个
  3. context.Response.Write(aa); //这里返回JSon数据,前台接受变成了Object
  1. <script>
  2.  
  3. $.ajax({
  4. type: "Post",
  5. url: "GetJson.ashx",
  6. data: "",
  7. dataType: "json",
  8. async: true,
  9. success: function (data) {
  10. console.log(data);
  11. console.log(data.Name);
  12. console.log(data.Love[].one);
  13. }
  14. })
  15. </script>

发现问题:

不管是我们手写Json字符串,还是利用JsonData转成JSON格式,你会发现都需要你去构造,如果你需要得到一张表,并且列很多,你要写到什么。并且有个很严重的缺点,就是获取多条数据的时候改怎么处理,很麻烦。以上的只能使用与小量数据,还好我们知道一个dll可以很好的解决这个问题。

④这个dll之前也用过,就是 Newtonsoft.Json   下载地址:点击

我们的来看看列子。

  1. public void ProcessRequest(HttpContext context)
  2. {
  3. context.Response.ContentType = "text/plain";
  4. // DataSet ds = new FunctionDemo.BLL.Users().GetList("");
  5. FunctionDemo.Model.Users usModel = new FunctionDemo.BLL.Users().GetModel();
  6. // JsonConvert.SerializeObject 这个静态方法 翻译就是序列化对象
  7. context.Response.Write(JsonConvert.SerializeObject(usModel)); //不能直接返回一个对象,或一个数据集
  8. }
  1. <script>
  2.  
  3. $.ajax({
  4. type: "Post",
  5. url: "GetJson.ashx",
  6. data: "",
  7. dataType: "json",
  8. async: true,
  9. success: function (data) {
  10. console.log(typeof(data));
  11. console.log(data);
  12.  
  13. },
  14. error: function () {
  15. alert(" 错了");
  16. }
  17. })
  18. </script>

  1. public void ProcessRequest(HttpContext context)
  2. {
  3. context.Response.ContentType = "text/plain";
  4. DataSet ds = new FunctionDemo.BLL.Users().GetList("");
  5. FunctionDemo.Model.Users usModel = new FunctionDemo.BLL.Users().GetModel();
  6. // JsonConvert.SerializeObject 这个静态方法 翻译就是序列化对象
  7. //可以自己打造一个对象,把需要的数据填写进去 这个位子很灵活需要根据你想要的进行处理
  8. //也可以打造一张表 就可以添加很多数据了
  9. var dd= new { Name = usModel.LoginName, Age = , Sex = "男" };
  10.  
  11. context.Response.Write(JsonConvert.SerializeObject(dd));
  12. }

多条数据

  1. public void ProcessRequest(HttpContext context)
  2. {
  3. context.Response.ContentType = "text/plain";
  4. DataSet ds = new FunctionDemo.BLL.Users().GetList("");
  5. FunctionDemo.Model.Users usModel = new FunctionDemo.BLL.Users().GetModel();
  6. // JsonConvert.SerializeObject 这个静态方法 翻译就是序列化对象
  7.  
  8. context.Response.Write(JsonConvert.SerializeObject(ds.Tables[]));
  9. }
  1. <script>
  2.  
  3. $.ajax({
  4. type: "Post",
  5. url: "GetJson.ashx",
  6. data: "",
  7. dataType: "json",
  8. async: true,
  9. success: function (data) {
  10. console.log(typeof(data));
  11. console.log(data);
  12. console.log(`姓名:${data[].LoginName}`);
  13.  
  14. },
  15. error: function () {
  16. alert(" 错了");
  17. }
  18. })
  19. </script>

总结:在后台获取数据返回时需要序列化成JSON格式的数据,在前台接收时可用先看下数据类型,如果是JSON数据格式就转下型,无非就是Eval(data)和JSon.Pase(data)。

在后台我们返回JSON字符串,在前台我们需要变成Object.

前台返回JSON数据后台接收

这个前台都是一样的,下面主要看看后台怎么反序列化数据

  1. <script>
  2. var ob = { "LoginName": "李某", "PassWord": "" }; //对象 这里的属性跟你的类字段一样的,不要自己瞎起名字
  3. var js = '{"LoginName":"社会我李哥","PassWord":"哦"}'; //JSON
  4. //传递的数据必须为JSON格式的
  5. //把对象转成JSon字符串传进入
  6. $.ajax({
  7. type: "Post",
  8. url: "GetJson.ashx",
  9. data: "ob="+JSON.stringify(ob)+"&js="+js, //测试传一个对象,不转型的时候,后台无法处理,所以传递必须为JSON数据格式 一个,数组都可以
  10. dataType: "json",
  11. async: true,
  12. success: function (data) {
  13. console.log(typeof (data));
  14. console.log(data);
  15. alert(data.LoginName);
  16. },
  17. error: function () {
  18. alert(" 错了");
  19. }
  20. })
  21. </script>

后台:

  1. string ob = context.Request.Form["ob"];// "{\"LoginName\":\"李某\",\"PassWord\":\"159\"}"
  2. string js = context.Request.Form["js"];// "{\"LoginName\":\"社会我李哥\",\"PassWord\":\"哦\"}"
  3.  
  4. //下面需要做的就是把JSON转成对象(一个确定的对象)
  5.  
  6. //①自带的
  7. JavaScriptSerializer json = new JavaScriptSerializer();
  8. //反序列化,主要他需要的参数,如果是数据集 就换成 List<T>
  9. FunctionDemo.Model.Users one = json.Deserialize(ob, typeof(FunctionDemo.Model.Users)) as FunctionDemo.Model.Users;
  10.  
  11. //②dll typeof(T) 这个参数一个要带,不然成功不了
  12. FunctionDemo.Model.Users model = JsonConvert.DeserializeObject(js, typeof(FunctionDemo.Model.Users)) as FunctionDemo.Model.Users;
  13. //或者 JsonConvert.DeserializeObject<FunctionDemo.Model.Users>(js);
    //如果你传递的JSON数据没有确切的类型来接受,你自己可以在上面写一个 class ,属性值更你传递过来的属性是一一对应的就行

经过测试获取成功

总结:前台传数据之前就需要转成JSON格式,后台才好反序列化。

到此Json传递数据就完了。

 
 要点:传递的参数是JSON类型,接受成功了转成对象使用
 
 
 

C#Json数据交互的更多相关文章

  1. json数据交互

    springmvc 的json数据交互 - 哎幽的成长 - CSDN博客--和老师讲课相同http://blog.csdn.net/u012373815/article/details/4720818 ...

  2. spring-boot json数据交互

    SpringBoot学习之Json数据交互 最近在弄监控主机项目,对javaweb又再努力学习.实际的项目场景中,前后分离几乎是所以项目的标配,全栈的时代的逐渐远去,后端负责业务逻辑处理,前端负责数据 ...

  3. SpringMVC JSON数据交互

    本节内容: @RequestBody @ResponseBody 请求json,响应json实现 前端可以有很多语言来写,但是基本上后台都是java开发的,除了c++(开发周期长),PHP和#Net( ...

  4. springMVC学习(11)-json数据交互和RESTful支持

    一.json数据交互: json数据格式在接口调用中.html页面中较常用,json格式比较简单,解析还比较方便. 比如:webservice接口,传输json数据. springMVC进行json交 ...

  5. SpringMVC入门(二)—— 参数的传递、Controller方法返回值、json数据交互、异常处理、图片上传、拦截器

    一.参数的传递 1.简单的参数传递 /* @RequestParam用法:入参名字与方法名参数名不一致时使用{ * value:传入的参数名,required:是否必填,defaultValue:默认 ...

  6. Spring MVC之JSON数据交互和RESTful的支持

    1.JSON概述 1.1 什么是JSON JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式.它是基于JavaScript的一个子集,使用了C.C ...

  7. springmvc的json数据交互

    准备 @RequestBody 作用: @RequestBody注解用于读取http请求的内容(字符串),通过springmvc提供的HttpMessageConverter接口将读到的内容(json ...

  8. 1.4(Spring MVC学习笔记)JSON数据交互与RESTful支持

    一.JSON数据交互 1.1JSON简介 JSON(JavaScript Object Notation)是一种数据交换格式. 1.2JSON对象结构 {}代表一个对象,{}中写入数据信息,通常为ke ...

  9. SprimgMVC学习笔记(八)—— SpringMVC与前台json数据交互

    一.两种交互形式 可以看出,前台传过来的方式有两种,一种是传json格式的数据过来,另一种就是在url的末尾传普通的key/value串过来,针对这两种方式,在Controller类中会有不同的解析, ...

  10. springmvc学习笔记(18)-json数据交互

    springmvc学习笔记(18)-json数据交互 标签: springmvc springmvc学习笔记18-json数据交互 springmvc进行json交互 环境准备 加入json转换的依赖 ...

随机推荐

  1. EOS 数据签名与公匙验证代码用例

    本文编写了一个小例子诠释了EOS是如何对数据签名与校验的,通过本文可以理解了签名的重要性和数据的不可篡改性. 系统: ubuntu  版本为EOS1.1.1 注:因为本文的程序是把EOS里面的钱包和f ...

  2. POJ1022 Packing Unit 4D Cubes

    题目来源:http://poj.org/problem?id=1022 题目大意: 有一些4维的单位体积的立方体盒子,每个立方体有8个面.要用一个大的4为盒子将它们包起来,求最小的大盒子体积. 输入: ...

  3. P4135 作诗

    传送门 分块 设sum[ i ] [ j ] 存从左边到第 i 块时,数字 j 的出现次数 f [ i ] [ j ] 存从第 i 块,到第 j 块的一整段的答案 那么最后答案就是一段区间中几块整段的 ...

  4. Spring学习(一)IOC

     Spring是一站式框架: (1)Spring在javaee三层结构中,每一层都提供不同的解决技术. web层:SpringMVC service层:Spring的Ioc dao层:Spring的J ...

  5. 《zabbix监控的搭建》centos5.8 32

    系统环境centos5.8 32位操作系统   这里以zabbix-2.2.7为例: 下载官方的软件包: http://pan.baidu.com/s/1ntuTRYh 官方的参考文档: https: ...

  6. webpack.config.js====配置babel

    参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...

  7. MySQL JOIN | 联结

    联结是利用SQL的SELECT能执行的最重要的操作.为了提高存储的有效性和避免数据冗余,往往会将有关联的数据存储在好几张表中,那么怎样用一条SELECT语句就能检索出这些数据呢? 答案是JOIN(联结 ...

  8. java如何导入Excel文件

    Java使用POI导入Excel文件,操作起来比较简单,支持xlsx格式. 下载POI资源包 从官网https://poi.apache.org/下载POI,笔者选择的是版本是3.17,下载后文件名是 ...

  9. 一些C/C++中的函数

    项目中使用到的C/C++中的一些函数,记录下来加以理解和掌握. 1.memset( ) memset是计算机中C/C++语言函数.将s所指向的某一块内存中的前n个 字节的内容全部设置为ch指定的ASC ...

  10. vim 粘贴复制操作

    原文链接:http://www.cnblogs.com/lansh/archive/2010/08/19/1803378.html vi编辑器有3种模式:命令模式.输入模式.末行模式.掌握这三种模式十 ...