ajax-get、set请求ashx数据

参数在open中通过querystring传递

var xhr;
                if (window.XMLHttpRequest) {//ie8及以上版本、ff、chrom
                    xhr = new XMLHttpRequest();
                }
                else {//ie6及以下版本
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //设定请求对象和后台哪个页面进行交互
                xhr.open("get", "Handler1.ashx?aaa=1", true);
                //发送请求
                xhr.send();
                //后台返回数据后,会调用此方法(回调函数)
                xhr.onreadystatechange = function (data) {
                    if (xhr.readyState == 4) {
                        alert(xhr.responseText);
                    }
                }

2、post方式
参数在send中传递
需要设置头部信息 xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

var xhr;
                if (window.XMLHttpRequest) {//ie8及以上版本、ff、chrom
                    xhr = new XMLHttpRequest();
                }
                else {//ie6及以下版本
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //设定请求对象和后台哪个页面进行交互
                xhr.open("post", "Handler1.ashx", true);
                //post请求要设置一下头部信息
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                //发送请求
                //post通过此处来传递参数
                xhr.send("aaa=1&bbb=2");
                //后台返回数据后,会调用此方法(回调函数)
                xhr.onreadystatechange = function (data) {
                    if (xhr.readyState == 4) {
                        alert(xhr.responseText);

3、请求JSON
后台 Handler1.ashx
1)定义类

    public class class_Test
    {
        public string id { get; set; }
        public string name { get; set; }
    }

2)构建JSON
方法一:格式字符串(注意:键值对一定全为字符串才可以被前台$.parseJSON方法接收)

       {
            context.Response.ContentType = "text/plain";
            List<class_Test> list = new List<class_Test>() { 
            new class_Test(){ id="1", name="张三"},
            new class_Test(){ id="2",name="李四"},
            new class_Test(){ id="3",name="王五"},
            new class_Test(){ id="4",name="赵六"}
            };
            //拼接JSON格式字符串
            StringBuilder sb = new StringBuilder();
            sb.Append("[");
            foreach (class_Test i in list)
            {
                sb.Append("{");
                //键值对一定要全部转义成字符串,否则前台$.parseJSON无法获取数据
                sb.AppendFormat("\"id\":\"{0}\",\"name\":\"{1}\"", i.id, i.name);
                sb.Append("},");
            }
            string str = sb.ToString().TrimEnd(',');
            str += "]";
            //输出
            context.Response.Write(str);
        }

方法二:添加System.Web.Extensions引用,用JavascriptSerializer处理

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            List<class_Test> list = new List<class_Test>() { 
            new class_Test(){ id="1", name="张三"},
            new class_Test(){ id="2",name="李四"},
            new class_Test(){ id="3",name="王五"},
            new class_Test(){ id="4",name="赵六"}
            };

            //将对象序列化成json格式的另外一种方法
            JavaScriptSerializer javascriptSerializer = new JavaScriptSerializer();
            string str=javascriptSerializer.Serialize(list);
            //输出
            context.Response.Write(str);
        }

前台(注意代码最后两行,将返回的数据转换为JSON格式,就能用 变量[0].xx 获取所需数据了)

var xhr;
                if (window.XMLHttpRequest) {//ie8及以上版本、ff、chrom
                    xhr = new XMLHttpRequest();
                }
                else {//ie6及以下版本
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //设定请求对象和后台哪个页面进行交互
                xhr.open("post", "Handler1.ashx", true);
                //post请求要设置一下头部信息
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                //发送请求
                //post通过此处来传递参数
                xhr.send("aaa=1&bbb=2");
                //后台返回数据后,会调用此方法(回调函数)
                xhr.onreadystatechange = function (data) {
                    if (xhr.readyState == 4) {
                        //将后台的数据返回,转换为JSON
                        var json = $.parseJSON(xhr.responseText);
                        alert(json[0].name);
                    }
                }
用jquery前台返回ashx数值的几种方法
     用下列方法时注意:
           ① $.getJSON、$.get、$.post、$.ajax、$("#控件").load 传参可以用{aaa:1,bbb:2},也可以用"aaa=1&bbb=2"
           ② $.get、$.post、$.ajax返回json格式方法:
                            1)设定dataType为"json"
                            2)用$.parseJSON(数据)
           ③对于$("#控件").load(地址,参数,回调函数)
                            1)因为没有dataType参数,所以只能用$.parseJSON(数据)输出JSON格式
                            2)如果参数为"aaa=1&bbb=2"形式,则为get请求;如果为{aaa:1,bbb:2}形式,则为post请求
 //$.getJSON(地址,参数,回调函数)
            $('#getJSON').click(function () {
                $.getJSON('Handler1.ashx', { aaa: 1, bbb: 2 }, function (data) {
                    alert(data[0].name);
                });
            });
            //$.get(地址,参数,回调函数,返回格式)
            $('#get').click(function () {
                $.get('Handler1.ashx', { aaa: 1, bbb: 2 }, function (data) {
                    alert(data[0].name);
                }, 'json');
            });
            //$.post(地址,参数,回调函数,返回格式)
            $('#post').click(function () {
                $.post(
                    'Handler1.ashx', { aaa: 1, bbb: 2 }, function (data) {
                        alert(data[0].name);
                    }, 'json');
            });
            //$.ajax({参数:值})
            $('#ajax').click(function () {
                $.ajax({
                    async: false,//是否异步
                    url: 'Handler1.ashx',
                    data: { aaa: 1, bbb: 2 },
                    type: 'post',//post方法
                    dataType: 'json',//返回json格式数据
                    success: function (data) {
                        alert(data[0].name);
                    },
                    error: function () { alert('错误'); }
                });
            });
            //$("#控件").load(地址,参数,回调函数);
            $('#load').click(function () {
                $('#test').load('Handler1.ashx', { aaa: 1, bbb: 2 }, function (data) {
                    alert($.parseJSON(data)[0].name);
                });
            });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值