ajax-get、set请求ashx数据

前端之家收集整理的这篇文章主要介绍了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="赵六"}
            };

            //将对象序列化成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","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',function (data) {
                    alert(data[0].name);
                },'json');
            });
            //$.post(地址,返回格式)
            $('#post').click(function () {
                $.post(
                    'Handler1.ashx',function (data) {
                        alert(data[0].name);
                    },'json');
            });
            //$.ajax({参数:值})
            $('#ajax').click(function () {
                $.ajax({
                    async: false,//是否异步
                    url: 'Handler1.ashx',data: { aaa: 1,type: 'post',//post方法
                    dataType: 'json',//返回json格式数据
                    success: function (data) {
                        alert(data[0].name);
                    },error: function () { alert('错误'); }
                });
            });
            //$("#控件").load(地址,回调函数);
            $('#load').click(function () {
                $('#test').load('Handler1.ashx',function (data) {
                    alert($.parseJSON(data)[0].name);
                });
            });

猜你在找的Ajax相关文章