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("......")。本文到此结束!

如何在.NET MVC中使用jQuery并返回JSON数据的更多相关文章

  1. [转]如何在.NET MVC中使用jQuery并返回JSON数据

    本文转自:http://blog.sina.com.cn/s/blog_48e42dc90100xp1p.html 二.开始实践 - jQuery端 假设我们要从服务器端获取一个文章列表,并把文章条目 ...

  2. jquery ajax返回json数据进行前后台交互实例

    jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...

  3. Spring MVC 中 AJAX请求并返回JSON

    一.以ModelAndView的方式返回 先看下JavaScript代码: /** * 保存-同步(版本控制库) */ function saveSynchronizedVcHorse(obj) { ...

  4. Jquery,ajax返回json数据后呈现到html页面的$.post方式。

    ------------------------------------------------------完整版------------------------------------------- ...

  5. jquery $.post 返回json数据

    $(function () { $("#prompt").hide(); $("#searchIpt").keyup(function () { var key ...

  6. asp.net中webservice与android的json数据交互方式设置

    一 .服务器端设置 1.修改web.config 在web.config里面的的system.Web节点添加 <webServices> <protocols> <add ...

  7. asp.net mvc中使用jquery H5省市县三级地区选择控件

    地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...

  8. Spring MVC Controller与jquery ajax请求处理json

    在用 spring mvc 写应用的时候发现jquery传递的[json数组对象]参数后台接收不到,多订单的处理,ajax请求: "}]}]} $.ajax({ url : url, typ ...

  9. 使用jQuery解析JSON数据(由ajax发送请求到php文件处理数据返回json数据,然后解析json写入html中呈现)

    在上一篇的Struts2之ajax初析中,我们得到了comments对象的JSON数据,在本篇中,我们将使用jQuery进行数据解析. 我们先以解析上例中的comments对象的JSON数据为例,然后 ...

随机推荐

  1. struts2视频学习笔记 18(自定义拦截器)

    课时18 自定义拦截 因为struts2中如文件上传,数据验证,封装请求参数到action等功能都是由系统默认的defaultStack中的拦截器实现的,所以我们定义的拦截器需要引用系统默认的defa ...

  2. 一步一步配置NLB(续)之深入测试

    在这里http://blog.csdn.net/haoxiaozigang1/article/details/12198679跟大家分享了NLB配置的过程,下面写一些对NLB不同情况的下测试的结果: ...

  3. PHP FTP操作类( 上传、拷贝、移动、删除文件/创建目录 )

    /** * 作用:FTP操作类( 拷贝.移动.删除文件/创建目录 ) * 时间:2006/5/9 * 作者:欣然随风 * QQ:276624915 */ class class_ftp { publi ...

  4. Spring对事务的处理

    1.加入spring-jdbc.jar包 2.配置数据源 3.配置spring事务管理器,spring的事务出现在业务层. <bean id="dataSource" cla ...

  5. 161018--NOIP模拟

    老实说,感觉自己好菜啊..(安慰自己省选做多了 T1:看似1e6很大,实际上常数52都能草过去...不知为何RE.. T2:记忆化搜索.看错题目条件QAQ,其实把自己暴力搜的程序改改就好了.. T3: ...

  6. C#点击按钮用DataGridView动态增加行、删除行,增加按钮列

    原来有一行: 点击添加,在下面增加同样的一行 新增加的行有一列删除按钮,点击某行的删除按钮时,删除当前行 方法: 哈哈,我果然好聪明啊 1.文本框.文本框.添加按钮 2.一个DataGridView( ...

  7. checkbox全选功能

    $("#cb_classType_all").change(function () { if ($(this).is(":checked")) { $(&quo ...

  8. fqrouter让安卓手机登陆facebook成为可能

    大多数人向来都是在电脑上通过各种代理工具来访问一些国外网站,例如facebook,twitter,然而你是否想过可以通过你的手机来畅游这些网站呢,接下来我将介绍一种通过fqrouer实现使用安卓手机畅 ...

  9. C语言中的getchar和putchar详解

    首先给出<The_C_Programming_Language>这本书中的例子: #include <stdio.h> int main(){    int c;     c ...

  10. mysql 导入数据库文件到指定数据库

    i:\mysql\bin>mysql  -u  用户名 -p  数据库名  <   i:/test.sql // (source "c:\adsense.sql" ) ...