AJAX异步加载
AJAX含义: 即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX可以跨语言传递数据,所需文件类型是一般处理程序(数据接口):ashx
数据交换格式:
xml:
结构不清晰
代码量比较大
查找起来比较费事
非面向对象结构
json:
结构清晰
代码量相对较小
面向对象的处理解析方式,查找数据很简单
json的格式:
键值对
{“key1″:”value”,”key2″:”value”}
多个对象的json
[{“key1″:”value”,”key2″:”value”},{“key1″:”value”,”key2″:”value”},{“key1″:”value”,”key2″:”value”}]
AJAX使用
JS部分的固定格式:(需引用jquery)
$.ajax({ url: "ajax/bbb.ashx", //要将此次请求提交到哪个服务端去 data: { "zhangke": c }, //给服务端带的数据,可以没有,也可以多个 type: "post", //传递的方式 dataType: "json", //数据传递的格式 success: function (aaa) { document.getElementById("Label1").innerHTML = aaa.lmz; if (aaa.xc == "true") { document.getElementById("Label1").style.color = "green"; } else { document.getElementById("Label1").style.color = "red"; } } });
后台:
public void ProcessRequest (HttpContext context) { string s = context.Request["zhangke"]; string end = "{\"lmz\":\"恭喜!用户名可用!\",\"xc\":\"true\"}"; if (s == "zhangsan" || s == "lisi") { end = "{\"lmz\":\"用户名已被占用!\",\"xc\":\"false\"}"; } context.Response.Write(end); context.Response.End(); }
注意:json的格式一定不能错,中间的许多双引号需要转义符,如果容易弄错,个人方法是可以先用个其他符号代替,比如单引号,然后对字符串进行操作把里面的所有单引号替换为双引号
AJAX扩展:(加载多行数据)
关键部分是后台中需要给JS传递过去多个json对象,以及JS中如何把多个对象的数据加载到表格中
首先,写好查询方法,查询出需要的数据,返回一个泛型集合,然后用循环拼接出json,特别要注意逗号的拼接
string json = "["; List<Users> ulist = new UsersData().Select(c, n); int count = 0; foreach (Users u in ulist) { if (count > 0) { json += ","; } json += "{\"username\":\"" + u.UserName + "\",\"password\":\"" + u.PassWord + "\",\"nickname\":\"" + u.NickName + "\",\"sex\":\"" + (u.Sex ? "男" : "女") + "\",\"birthday\":\"" + u.Birthday.ToString("yyyy年MM月dd日") + "\",\"nation\":\"" + u.Nation + "\",\"class\":\"" + u.Class + "\",\"age\":\"" + u.Age + "\"}"; count++; } json += "]"; context.Response.Write(json); context.Response.End();