asp.net中Jquery ajax和ashx的结合使用

最新推荐文章于 2021-08-05 17:20:29 发布

原创最新推荐文章于 2021-08-05 17:20:29 发布 · 935 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用JQuery AJAX与ASHX进行数据交互，包括获取文本和JSON格式的数据，并展示JavaScriptSerializer序列化DataTable的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 aspx中Jquery ajax和ashx的结合使用

1. aspx中代码：

url: 'JsonHandler.ashx', //url地址也可以是txt文本
dataType: 'text', //数据类型 text 、json等
data:'type='+type, //传递的参数最后呈现效果 JsonHandler.ashx?type='';
success:function(msg) { $("#category").html(msg); }, //成功时的处理
error: function(data){ alert(data);} //失败时的处理

})
}
</script>

2 .ashx中代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Text;

namespace AuditSystem
{
    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class JsonHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            StringBuilder strBul = new StringBuilder();
            strBul.Append("<option value='wangtao'>");
            strBul.Append(context.Request.Params["type"].ToString());
            strBul.Append("</option>");
            context.Response.ContentType = "text/html";
            context.Response.Write(strBul.ToString());
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

二 jQuery中使用Ajax获取JSON格式数据

首先，music.txt中的内容如下：

[
{"optionKey":"1", "optionValue":"Canon in D"},
{"optionKey":"2", "optionValue":"Wind Song"},
{"optionKey":"3", "optionValue":"Wings"}
]

接下来是HTML代码：

<div>点击按钮获取JSON数据</div>
<input type="button" id="button" value="确定" />
<div id="result"></div>

使用Ajax获取JSON数据的jQuery代码：

$(document).ready(function(){
	$('#button').click(function(){
		$.ajax({
			type:"GET",
			url:"music.txt",
			dataType:"json",
			success:function(data){
				var music="<ul>";
				//i表示在data中的索引位置，n表示包含的信息的对象
				$.each(data,function(i,n){
					//获取对象中属性为optionsValue的值				
					music+="<li>"+n["optionValue"]+"</li>";
				});
				music+="</ul>";
				$('#result').append(music);
			}
		});
		return false;
	});
});

使用Js获取.ashx 的JSON数据的代码：

<script type="text/javascript">
        function getJson() {
            // 在IE7下测试通过，IE6下必须创建 new ActiveXObject("MSXML2.XMLHTTP.6.0")
            var request = new XMLHttpRequest();

            request.open('GET', 'GetJson.ashx');
            request.onreadystatechange = function() {
                if (request.readyState == 4 && request.status == 200) {
                    var objs = eval(request.responseText);
                    alert(objs.length); // 2
                    alert(objs[0].id);  // 1
                    alert(objs[1].name);// 'n_2'
                }
            }
            request.send(null);
        }
    </script>

2 $.getScript("ashx/Handler.ashx", function (data) { alert（data）;  }); //y也是其中一种

当然，也可以使用$.getJSON()方法，代码简洁一点：

$(document).ready(function(){
	$('#button').click(function(){

		$.getJSON('music.txt',function(data){
//Handler.ashx?action=name ,function(data){}

		var music="<ul>";
			$.each(data,function(i,n){
				music+="<li>"+n["optionValue"]+"</li>";
			});
			music+="</ul>";
			$('#result').append(music);
		});
		return false;
	});
});

三 JavaScriptSerializer 类序列化datatable数据：

      public string Serialize(System.Data.DataTable dt)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
            foreach (DataRow dr in dt.Rows)
            {
                Dictionary<string, object> result = new Dictionary<string, object>();
                foreach (DataColumn dc in dt.Columns)
                {
                    result.Add(dc.ColumnName, dr[dc].ToString());
                }
                list.Add(result);
            }
            return serializer.Serialize(list); ;
        }