JSON入门指南--服务端处理JSON
2014-04-03 14:45
465 查看
平时公司使用的ASP.NET MVC3来开发Web项目,其实在ASP.NET中已经原生的支持JSON。所以基本不需要引进Newtonsoft.Json.dll。下面看在MVC4中,后台生成JSON数据,前端使用Ajax调用。然后就是前端使用POST请求,发送JSON格式,后台程序来处理。
1.后台生成JSON格式数据,前端使用Ajax调用
后台代码:
前端调用代码:
2.前端使用POST请求,发送JSON格式数据给后台
页面放置一个button,代码片段为:<input type="button" id="btn_send" value="Send" />
后台代码:
很多人会问我,使用了MVC3,为什么不在前端使用Model,然后绑定数据,这样后台处理方便,而已编辑的时候,前端基本不要做什么事情。其实这样考虑是为了把前端和后台完全分离出来,前端使用AngularJS做数据的绑定。前端和后台数据的传输格式就使用JSON。后面我们会研究ASP.NET Web API如何做到前端和后台完全分离的。
参考网址: http://www.dotblogs.com.tw/kevintan1983/archive/2012/12/26/86013.aspx
1.后台生成JSON格式数据,前端使用Ajax调用
后台代码:
public JsonResult GetList() { ArrayList eventlist = new ArrayList(); for (int i = 0; i < 3; i++) { Hashtable ht = new Hashtable(); ht.Add("eventid", i + 1); ht.Add("eventname", "测试活动"); ht.Add("eventdata", "2014-04-02"); ht.Add("eventlocation", "公司"); eventlist.Add(ht); } return Json(new { list = eventlist, count = eventlist.Count }, JsonRequestBehavior.AllowGet); }
前端调用代码:
$.ajax({ url: "/Home/GetList", success: function (data) { var eventlist =data.list; for(var index in eventlist){ console.log(eventlist[index].eventname); } console.log(data.count); } });
2.前端使用POST请求,发送JSON格式数据给后台
页面放置一个button,代码片段为:<input type="button" id="btn_send" value="Send" />
$("#btn_send").click(function () { var person1 = new Object(); person1.Name = "Superman"; person1.Age = 20; var person2 = new Object(); person2.Name = "BBB"; person2.Age = 22; var arr = []; arr.push(person1); arr.push(person2); $.ajax({ url: '/Home/AddUser', type: "POST", data: JSON.stringify(arr), success: function (data) { console.log(data); } }); });
后台代码:
[HttpPost] public JsonResult AddUser() { string json = string.Empty; using(var reader=new StreamReader(HttpContext.Request.InputStream)) { json = reader.ReadToEnd(); } bool result = false; string message = string.Empty; var personlist = new JavaScriptSerializer().Deserialize<List<Person>>(json); foreach(Person p in personlist){ result = true; message += p.Name + ":" + p.Age; } return Json(new { result=result,message=message}); } public class Person { public string Name { get; set; } public int Age { get; set; } }
很多人会问我,使用了MVC3,为什么不在前端使用Model,然后绑定数据,这样后台处理方便,而已编辑的时候,前端基本不要做什么事情。其实这样考虑是为了把前端和后台完全分离出来,前端使用AngularJS做数据的绑定。前端和后台数据的传输格式就使用JSON。后面我们会研究ASP.NET Web API如何做到前端和后台完全分离的。
参考网址: http://www.dotblogs.com.tw/kevintan1983/archive/2012/12/26/86013.aspx
相关文章推荐
- JavaScript 开发进阶:理解 JavaScript 作用域和作用域链
- jstl 四舍五入运算后保量两位小数
- 【javascript】javascript中的JSON.parse()和JSON.stringify()
- Jsp 显示图片问题(相对路径)
- js select多选框操作
- 【javascript】javascript中this关键字的用法(推荐)
- 网页的宽高时时随浏览器缩放而缩放
- JS选择打印
- JS中字符串的相关操作
- 【javascript】javascript中的this
- html 、javascript、css言简意赅
- 【javascript】JavaScript的函数和对象的对象化能力(推荐)
- 【javascript】javascript中JSON.parse()与eval()区别
- 【javascript】javascript中的JSON对象
- 用js实现table内容从下到上连续滚动
- 用js实现table内容从下到上连续滚动
- 解析多json组成的字符串
- 【javascript】javascript中的JSON.stringify函数的理解
- 【javascript】javascript中JSON.parse函数的理解
- C# 对象与JSON相互转换