tnblog
首页
视频
资源
登录

js与后台通过json传递对象

5688人阅读 2021/8/25 17:07 总访问:827600 评论:0 收藏:0 手机
分类: .net

原理图解:

前台:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <script src="js/jquery-1.9.1.min.js"></script>
  7.     <script>
  8.         var getObj = function ({
  9.             $.get('GetObjHandler.ashx'function (result{
  10.                 //json字符串
  11.                 console.log(result);
  12.                 //json对象
  13.                 var jsonObj = JSON.parse(result);
  14.                 console.log(jsonObj);
  15.                 alert(jsonObj.Id);
  16.                 alert(jsonObj.UserName);
  17.                 alert(jsonObj.Password);
  18.             });
  19.         }
  20.         var setObj = function ({
  21.             //json对象,json对象可以理解成一个键值对
  22.             var jsonObj = { Id1UserName"xxxxxxxxxxx"Password"jjjjjjjjjjjjj" };
  23.             //json对象转换成json字符串(json序列化)
  24.             var jsonStr = JSON.stringify(jsonObj);
  25.             console.log(jsonStr);
  26.             //前台传递json字符串
  27.             $.post('SetObjHandler.ashx', { jsonStr: jsonStr }, function ({
  28.             });
  29.         }
  30.     </script>
  31. </head>
  32. <body>
  33.     <input type="text" value="aaa" id="username" />
  34.     <input type="button" value="ajax请求后台返回对象" onclick="getObj()" />
  35.     <input type="button" value="ajax前台传递对象到后台" onclick="setObj()" />
  36.     <input type="button" id="testBut" value="测试按钮" />
  37. </body>
  38. </html>

GetObjHandler后台:

  1. namespace WebLearn
  2. {
  3.     /// <summary>
  4.     /// GetObjHandler 的摘要说明
  5.     /// </summary>
  6.     public class GetObjHandler : IHttpHandler
  7.     {
  8.         public void ProcessRequest(HttpContext context)
  9.         {
  10.             context.Response.ContentType = "text/plain";
  11.             UserInfo userInfo = new UserInfo();
  12.             userInfo.Id = 1;
  13.             userInfo.UserName = "xxxxxxx";
  14.             userInfo.Password = "jjjjjjj";
  15.             //这样直接传递是不行的,前台得到的只是一个类型字符串而已
  16.             //context.Response.Write(userInfo);
  17.             //在传递之前需要把对象字符串化,也就是json序列化
  18.             JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
  19.             string jsonStr = javaScriptSerializer.Serialize(userInfo);
  20.             context.Response.Write(jsonStr);
  21.         }
  22.         public bool IsReusable
  23.         {
  24.             get
  25.             {
  26.                 return false;
  27.             }
  28.         }
  29.     }
  30. }

SetObjHandler:

  1. namespace WebLearn
  2. {
  3.     /// <summary>
  4.     /// SetObjHandler 的摘要说明
  5.     /// </summary>
  6.     public class SetObjHandler : IHttpHandler
  7.     {
  8.         public void ProcessRequest(HttpContext context)
  9.         {
  10.             context.Response.ContentType = "text/plain";
  11.             string jsonstr = context.Request["jsonStr"];
  12.             //把json字符串变成c#对象-->json反序列化
  13.             JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
  14.             UserInfo userInfo = javaScriptSerializer.Deserialize<UserInfo>(jsonstr);
  15.             context.Response.Write("aaa");
  16.         }
  17.         public bool IsReusable
  18.         {
  19.             get
  20.             {
  21.                 return false;
  22.             }
  23.         }
  24.     }
  25. }




C#:json序列化与反序列化


   使用的类:   JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();当然还可以有很多类


   序列化:      javaScriptSerializer.Serialize(你要序列化的对象);        可以在对象转换成字符串

   反序列化:  T t= javaScriptSerializer.Deserialize<T>(jsonstr);      T: 你要反序列的类型      注意,json对象和c#对象要属性要一样,才能对应上,区分大小写


   

Js:json序列化与反序列化


   使用的类:JSON


   序列化:   JSON.stringify(你要序列化的对象);            把对象转成成json字符串

   反序列化:类型  对象 = JSON.parse(json字符串);      对json字符串转换成对象


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

js与Controller中分割字符串的方法

js: varstr=OpenRule; varstrs=newArray(); strs=str.split(&quot;,&quot;); for(vari=0;i&lt;strs.length;i++){ $(&q...

珍藏!! js CSS不传之秘集合

&lt;!--其中5指每隔5秒刷新一次页面--&gt; &lt;metahttp-equiv=&quot;refresh&quot;content=&quot;5&quot;&gt; =========...

jsON对象和jsON字符串的区别

JSON对象是直接可以使用JQuery操作的格式,如C#中可以用对象(类名)点出属性(方法)一样var str2 = { &quot;name&quot;: ...

对象转jsON

/// &lt;summary&gt; /// 对象转json /// &lt;/summary&gt; public static string ToJson(object jsonObject) ...

来!!!今天玩 json

别怪我懒,其实我是真的懒///&lt;summary&gt; ///List转成json ///&lt;/summary&gt; ///&lt;typeparamname=&quot;T&quot...

js遍历localStorage的键值对

//遍历本地存储localStorage for(vari=0;i&lt;localStorage.length;i++){ varkey=localStorage.key(i);//获取本地存储的K...

拓展js通用方法来对应c操作

有很多时候,js不能像c#一样有那样多的方法操作,但是我们可以自己写一些方法,让他拥有:比如最常见的一些:注意:js里的...

js的localStorage

localStorage的优势1、localStorage拓展了cookie的4K限制2、localStorage会可以将第一次请求的数据直接存储到本地,这个相...

js监听input、keydown,有输入法时打字完成后触发事件

在给输入框绑定input或keydown事件时预期效果是有输入法时,输入中文后触发事件,不希望输一个字母就触发一次事件可以用到c...

js截取两个字符中间的字符串

使用正则表达式来取比如我们要取brush:js;toolbar:false 这个字符串冒号和分号中间的字符串可以varclassname=&quot;brush:j...

Vue.js+Layer实现表格数据绑定与更新

一:使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接...

js使用正则进行常用验证

?:问号前面的数字匹配0次或1次,也就是懒惰匹配,最多匹配一次+:匹配1次到无穷次*:匹配0次到无穷次验证只能:数字、字母...

js字符串的替换

vartitle=&quot;我是你的大表哥&quot;; title=title.replace(&quot;大表哥&quot;,&quot;大表妹&quot;); alert(title);输...

Vue.js 实现省市联动

HTML代码&lt;divid=&quot;pro_citys&quot;&gt; 省:&lt;selectid=&quot;provice&quot;v-on:change=&quot;prochange()&quo...

Vue.js常见问题

一:花括号当做字符串显示的问题1:检查下绑定到vue.js的id是否重复,如果id重复了,就有可能存在这种问题,因为有可能把数...

vue.js常用指令

v-html可以把字符串当成一个html来渲染,而不是原样输出Html类似.net mvc中的@Html.Raw()方法&lt;divv-html=&quot;item.tit...
这一生多幸运赶上过你.
排名
8
文章
222
粉丝
7
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术