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();
复制代码
 
然后在界面的表格中，我们需要先写一个tbody标签并给一个id，创建一个变量，把从后台接收过来的多个json对象中的数据进行拼接加工，把这个变量拼接成表格中一段完整的HTML代码，然后使用innerHTML直接添加到tbody中
$.ajax({
        url: "ajax/Load.ashx",
        data: { "count": count, "number": number },
        type: "post",
        dataType: "json",
        success: function (data) {
            document.getElementById("tbody").innerHTML = "";
            for (i in data) {
                var end = "<tr>";
                end += "<td>" + data[i].username + "</td>";
                end += "<td>" + data[i].password + "</td>";
                end += "<td>" + data[i].nickname + "</td>";
                end += "<td>" + data[i].sex + "</td>";
                end += "<td>" + data[i].age + "</td>";
                end += "<td>" + data[i].birthday + "</td>";
                end += "<td>" + data[i].nation + "</td>";
                end += "<td>" + data[i].class + "</td>";
                end += "</tr>";

                document.getElementById("tbody").innerHTML += end;
            }
            document.getElementById("sp-number").innerHTML = number;
        }
    });

 

posted @ 2017-01-16 13:34  吴皓杰  阅读(3466)  评论(0)  编辑  收藏  举报