zoukankan      html  css  js  c++  java
  • 如何在.NET MVC中使用jQuery并返回JSON数据

     http://blog.csdn.net/dingxingmei/article/details/9092249

    开始实践 - jQuery端

    假设我们要从服务器端获取一个文章列表,并把文章条目显示在页面中,而加载的过程要用ajax实现,即实现异步加载。那么我们先来完成jquery向服务器端发出ajax请求,并根据服务器响应来重组DOM从而实现文章在页面上显示。这里,和.NETMVC没有多大关系。具体的jquery代码如下:

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $.ajax({
        url:'/cgi/getArtical' //请求的某个action的地址
        datatype:"json" //只有指定为json下面才可以直接用返回的json数据,否则要转化
        type:'post',
        success:function (data) {
             PutArtical(data);  //该函数中处理json格式的文章数据data;
             HideTip();  //处理完文章后关闭加载提示
        },
        beforeSend:function(){
             LoadTip("正在加载文章");//这里是加载过程中的等待提示,可以自己定义
        }
    })

    这是一个普通的jquery中ajax调用的例子,需要注意的是datatype最好指定为json,因为下面服务器端是直接返回json对象的,这样success中返回的数据就直接是json对象,可以直接使用;如果不这样指定的话也行,不过在success函数中必须先把data转换成json对象,转换方法是eval_r('('+data+')')。

     

     开始实践 - .NET MVC服务器端

    上面我们可以让jquery来调用action了,那么我们接下来就来写这个action,并把结果以json的格式返回给jquery,具体代码如下:

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    ///<summary>
    /// 返回文章列表
    ///</summary>
    /// <paramname="name"></param>
    ///<returns></returns>
    [HttpPost]
    public ActionResult getArtical()
    {
          List<Artical>artList = newList<Artical>();
          artList.Add(newArtical(){ Id = 1,Title ="测试文章1" });
          artList.Add(newArtical(){ Id = 2,Title ="测试文章2" });
          returnJson(artList);   //MVC中可以用Json函数来将C#对象序列化成JSON对象
    }

    这个和以前普通的服务器代码不同的是最后我们可以非常方便地用Json函数将C#对象序列化成JSON对象并返回给jquery,代码十分简洁。

    总结

    在.NETMVC中使用jquery更加方便,jquery端只要我们指定返回的数据类型(datatype)为json就可以方便地使用服务器返回的json数据;服务器端我们可以用Json函数非常方便地将c#对象序列化成json对象而不必写一大堆的Response.Write("......")。本文到此结束!

  • 相关阅读:
    linux 操作系统 基础
    [HAOI2011]Problem A
    [HNOI2015] 菜肴制作
    [P3676]小清新数据结构题
    [NOI2016]区间
    [BOI2007]Mokia 摩基亚
    [NOI2012]美食节
    [CQOI2015]网络吞吐量
    [六省联考2017]期末考试
    [HNOI2015]亚瑟王
  • 原文地址:https://www.cnblogs.com/lihongchen/p/3635176.html
Copyright © 2011-2022 走看看