asp.net中 使用jquery+ashx 做ajax,json做数据传输

转载 2012年03月27日 13:04:06

asp.net中 使用jquery+ashx 做ajax,json做数据传输

一直在想在asp.net中怎么才能向在java中那样用struts那样做页面请求。

当然asp.net mvc就是类似struts的东西吧,不过还没来得及学习。

今天就用ashx来接收页面请求,并调用后台,然后返回数据给前台,用jquer .ajax提交请求,接收ashx返回的数据。

 

例子:

        例子是要实现页面加载时从数据库读取数据,并把数据放到一个下拉列表中。(因为是用ajax,就建html页面就行了,一直不喜欢aspx页面,感觉它太臃肿了。)

1.建web应用程序aspnetAjax

2.建index.htm

3.建个js文件夹,把jquery.js放进去,

4.建ajax文件夹,里面放ashx

5.在js文件夹建index.js,一般我们都是一个页面对应一个js

6.在ajax文件夹,建IndexHandler.ashx,一般一个js页面对应一个一般用户控件,这样层次感很强,也很好维护。

 

二.html页面

   html页面就简单了,我们要用ajax读后台做个下拉列表,所以页面就放个DIV就行了。其他的交给js.

 

HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    
<title>测试</title>

    
<script src="js/jquery-1.2.3-intellisense.js" type="text/javascript"></script>

    
<script src="js/index.js" type="text/javascript"></script>

</head>
<body>
    企业性质
<div id="vocaspec"> </div>
    行业类型<div id="industr"> </div>      
</body>
</html>

 

 

编写IndexHandler.ashx代码

 

代码
namespace aspnetAjax.ajax
{
    
/// <summary>
    
/// $codebehindclassname$ 的摘要说明
    
/// </summary>

    
public class IndexHandler : IHttpHandler
    {

        
public void ProcessRequest(HttpContext context)
        {
           context.Response.ContentType 
= "application/json";
           
//接收提交过来的meth参数
            string meth = context.Request.Params["meth"].ToString(); 
            
//根据参数调用不同的方法
            switch (meth) 
            {
                
case "load":
                    loadjson(context);
                    
break;
                
case "add":
                    add(context);
                    
break;
            }        
       }

        
public bool IsReusable
        {
            
get
            {
                
return false;
            }
        }

       
//页面加载方法,调用BLL,获得数据
         private void loadjson(HttpContext context) 
        {
            
//实例BLL
            VocaSpecSortBLL vocaSpec = new VocaSpecSortBLL();
            BLL.Owner ownerbll 
= new GYXMGL.BLL.Owner();
             
             DataSet ds 
= vocaSpec.GetList("");
             DataSet dsindustr 
= ownerbll.Getcharcte();

             
//实例一个StringBuilder 用来拼接一个json数据
             StringBuilder sbvoca = new StringBuilder();

            
if (ds != null && ds.Tables[0].Rows.Count > 0)
            {
                sbvoca.Append(
"{\"voce\":[");
                
int i = 1;
                
int count = ds.Tables[0].Rows.Count;
                
foreach (DataRow dr in ds.Tables[0].Rows) 
                {
                    
if (i == count)
                    {
                        sbvoca.Append(
"{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"}");
                    }
                    
else
                    {
                        sbvoca.Append(
"{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"},");
                    }
                    i
++;
                }
                sbvoca.Append(
"]");
            }
            
if (dsindustr != null && dsindustr.Tables[0].Rows.Count > 0
            {

                sbvoca.Append(
",\"industr\":[");
                
int i = 1;
                
int count = dsindustr.Tables[0].Rows.Count;
                
foreach (DataRow dr in dsindustr.Tables[0].Rows)
                {
                    
if (i == count)
                    {
                        sbvoca.Append(
"{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"}");
                    }
                    
else 
                    {
                        sbvoca.Append(
"{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"},");
                    }
                    i
++;
                }
                sbvoca.Append(
"]");
            }
            sbvoca.Append(
"}");
            context.Response.Write(sbvoca.ToString());
            
            context.Response.End();
        }

    }
}

 

 

我们把index.js改下

 

代码
$(document).ready(function() {
    $.ajax({
        type: 
"POST",
        url: 
"../ajax/NewOwnerHandler.ashx",
        
//我们用text格式接收
        dataType: "text",
        data: 
"meth=load",
        success: 
function(msg) {
            alert(msg);
            
//显示后台数据
            $("#vocaspec").html(msg);
            
// $("#industr").html(industr);
        }
    });
});

 

 

我可以看到如下数据,就是ashx中response给我们的json格式数据,现在我们要把这些数据

显示在下拉列表中。就要遍历json中的数组。

 

代码
{
"voce":[{"code":"1","name":"农林水利"},{"code":"10","name":"军工"},{"code":"11","name":"农林"},{"code":"12","name":"水利(电)"},{"code":"13","name":"水电站"},{"code":"14","name":"输变线"},{"code":"15","name":"煤矿"},{"code":"16","name":"气田"},{"code":"17","name":"公路"},{"code":"18","name":"铁路"},{"code":"19","name":"民航"},{"code":"2","name":"能源"},{"code":"20","name":"信息产业"},{"code":"21","name":"化工"},{"code":"22","name":"机械"},{"code":"23","name":"冶金"},{"code":"24","name":"有色金属"},{"code":"25","name":"建材"},{"code":"26","name":"医药"},{"code":"27","name":"轻工"},{"code":"28","name":"农牧产品深加工"},{"code":"3","name":"交通"},{"code":"4","name":"通讯"},{"code":"5","name":"特色产业"},{"code":"6","name":"城市基础设施"},{"code":"7","name":"商贸流通"},{"code":"8","name":"旅游"},{"code":"9","name":"文体卫"}],
"industr":[{"code":"1","name":"国有"},{"code":"2","name":"私人"}]
}

 

 

修改index.js代码,遍历json数据把数据显示成下拉列表

 

 

代码
$(document).ready(function() {
    $.ajax({
        type: 
"POST",
        url: 
"../ajax/NewOwnerHandler.ashx",
        
//json格式接收数据
        dataType: "json",
        
//指点后台调用什么方法
        data: "meth=load",

        success: 
function(msg) {
             
//实例2个字符串变量来拼接下拉列表
               var industr = "<select name=\"industr\"><option label=\"---请选择---\"></option>";
               
var vocaspec = "<select name=\"vocaspec\"><option label=\"---请选择---\"></option>";
              
//使用jquery解析json中的数据
               $.each(msg.voce, function(n, value) {
                     vocaspec 
+= ("<option value=\"" + value.code + "\" label=\"" + value.name + "\">");
                     vocaspec 
+= ("</option>");
                    });
                $.each(msg.industr, 
function(n, value) {
                     industr 
+= ("<option value=\"" + value.code + "\" label=\"" + value.name + "\">");
                      industr 
+= ("</option>");
                   });
             industr 
+= ("</select>");

             $(
"#vocaspec").html(vocaspec);
            $(
"#industr").html(industr);
        }
    });
});

 

 

asp.net webform 通过ajax取得json数据(一)

------------------  aspx請求画面  ------------------               $(function () {             $("#btn...
  • jsjpanxiaoyu
  • jsjpanxiaoyu
  • 2017年02月10日 15:54
  • 1061

HighCharts-Asp.net后台取Json数据模拟

博客缘起     最近项目需要用的图表,发现HighCharts是一个好用的工具。图表美观大方,公共API调用简练。缺点是图表种类不是很多,但是已经足够用了。     由于需要根据查询条件查询数据...
  • zhaojw83
  • zhaojw83
  • 2014年03月20日 17:26
  • 2382

asp.net Mvc4 使用ajax结合分页插件实现无刷新分页

本文为在mvc4中使用ajax实现无刷新分页demo,记录一下。 解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用ajax技术发送当前页码到后端控制器...
  • u013924731
  • u013924731
  • 2016年10月25日 17:02
  • 1682

ASP.NET利用Ajax进行前后台值传递

由于项目需要,最近涉及到许多网站页面前后台值传递问题,在这里做一个小总结,今天主要对Ajax传递数据做一个最简单的应用实例。         之前一直没有用过Ajax,许多时候看到这个词我都是抵触的,...
  • SmallXianNotImmortal
  • SmallXianNotImmortal
  • 2017年07月11日 13:05
  • 519

在asp.net web form 中使用ajax

在asp.net web form 中使用ajax 首先可以先去看看一篇兄弟文章:http://blog.csdn.net/mfcdestoryer/article/details/22041975...
  • MFCdestoryer
  • MFCdestoryer
  • 2014年03月25日 12:30
  • 2804

C# asp.net与jquery做ajax简单进度条

一直以为response.Flush() 可以实现。。。。发现不行的 最后还是采用了全局参数保存到 cahe 来做了 setCahe.ashx 模拟操作的事件进度 public voi...
  • livelymoon
  • livelymoon
  • 2015年08月28日 11:47
  • 803

ajax图片上传(asp.net +jquery+ashx)

一、建立Default.aspx页面 ajax图片上传 function upload(){...
  • junshangshui
  • junshangshui
  • 2011年09月21日 23:34
  • 15874

Ajax发送json格式数据到Asp.net MVC服务端的一些代码片段

最近一直做些asp.net mvc的页面,每次前端与后端交互,都要baidu查下代码怎么写,也不去思考为什么这么写,导致每每写这代码,都需要下search下代码。 正好现在有点空闲时间,我就把我写的代...
  • qq_26054303
  • qq_26054303
  • 2016年05月17日 17:29
  • 857

简单实用ssm+json+ajax三级联动

有些伙伴听到做三级联动就觉得很难,单你看了这个你会觉得很简单的,说白了就是两个2级联动。这个demo是在ssm的基础上用通过json+ajax实现的!可能做的不好,希望大家见解! 这里用到jsonAr...
  • sun2015_07_24
  • sun2015_07_24
  • 2016年01月12日 15:40
  • 9252

ASP.NET C#+Ajax+json无刷新分页参考

先html代码 ...
  • bianjing40
  • bianjing40
  • 2015年12月15日 21:51
  • 1459
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:asp.net中 使用jquery+ashx 做ajax,json做数据传输
举报原因:
原因补充:

(最多只允许输入30个字)