参数在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);
});
});