（.net）ajax+json+catch缓存+js控制页面动态生成div

本文实现的功能是：如下面流程图所示

     

调用的ajax得函数：

function ajax(url, fnSucc, fnFaild) {
    //1.创建对象
    var oAjax = null;
    if (window.XMLHttpRequest) {
        oAjax = new XMLHttpRequest();
    } else {
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.连接服务器  
    oAjax.open('POST', url, true);   //open(方法, url, 是否异步)

    //3.发送请求  
    oAjax.send();

    //4.接收返回
    oAjax.onreadystatechange = function () {  //OnReadyStateChange事件
        if (oAjax.readyState == 4) {  //4为完成
            if (oAjax.status == 200) {    //200为成功
                fnSucc(oAjax.responseText)
            } else {    
                if (fnFaild) {
                    fnFaild();
                }
            }
        }
    };
}

页面函数：

  var value1 = '';
    var obj;
    var arr = [];
        ajax("/GetGUID.ashx?type=3", function (mes) {
            //alert(mes);
            obj = eval('(' + mes + ')');
            var ar = [];
           
            for (var i = 0; i < obj.length; i++) {
                arr[i] = obj[i];
                ar[i] = obj[i].province;
            }
            ar = ar.unique1();
            bindpro(ar);
            bindcity();
            bindcontent();
        });

调用缓存和生成json串的函数：

 public String changetojson()
    {
        DataTable dt;
        dt = GETDT.IsContactUs();//查询缓存
        string m = datatabletojson.ToJson(dt);//生成json串
        return m;
    }

验证是否存在，如果存在，调用；如果不存在，创建缓存：

  public DataTable IsContactUs()
    {
        object cate = System.Web.HttpContext.Current.Cache.Get("BufferMemory");
        if (cate == null)
        {
            BufferMemory();
        }
        object o = System.Web.HttpContext.Current.Cache.Get("BufferMemory");
        DataTable ContactUsdtable = o as DataTable;
        return ContactUsdtable;
    }

没有缓存的情况下，重新添加缓存：

 public static void BufferMemoryContactUs()
    {
        string sql = @"";
        DataTable dt = SqlHelper.ReturnDataTableIk(sql, CommandType.Text);
        object NewsList = System.Web.HttpContext.Current.Cache.Get("BufferMemory");
        if (dt != null && dt.Rows.Count > 0)
        {
            System.Web.HttpContext.Current.Cache.Remove("BufferMemory");
            System.Web.HttpContext.Current.Cache.Insert("BufferMemory", dt, null, DateTime.Now.AddYears(1), TimeSpan.Zero);
        }
    }

生成json数组：

 /// <summary>     
    /// Datatable转换为Json     
    /// </summary>    
    /// <param name="table">Datatable对象</param>     
    /// <returns>Json字符串</returns>     
    public static string ToJson(DataTable dt)
    {
        StringBuilder jsonString = new StringBuilder();
        jsonString.Append("[");
        DataRowCollection drc = dt.Rows;
        for (int i = 0; i < drc.Count; i++)
        {
            jsonString.Append("{");
            for (int j = 0; j < dt.Columns.Count; j++)
            {
                string strKey = dt.Columns[j].ColumnName;
                string strValue = drc[i][j].ToString();
                Type type = dt.Columns[j].DataType;
                jsonString.Append("\"" + strKey + "\":");
                strValue = StringFormat(strValue, type);
                if (j < dt.Columns.Count - 1)
                {
                    jsonString.Append(strValue + ",");
                }
                else
                {
                    jsonString.Append(strValue);
                }
            }
            jsonString.Append("},");
        }
        jsonString.Remove(jsonString.Length - 1, 1);
        jsonString.Append("]");
        return jsonString.ToString();
    }
    /// <summary>
    /// 格式化字符型、日期型、布尔型
    /// </summary>
    /// <param name="str"></param>
    /// <param name="type"></param>
    /// <returns></returns>
    private static string StringFormat(string str, Type type)
    {
        if (type == typeof(string))
        {
            str = String2Json(str);
            str = "\"" + str + "\"";
        }
        else if (type == typeof(DateTime))
        {
            str = "\"" + str + "\"";
        }
        else if (type == typeof(bool))
        {
            str = str.ToLower();
        }
        else if (type != typeof(string) && string.IsNullOrEmpty(str))
        {
            str = "\"" + str + "\"";
        }
        return str;
    }
    /// <summary>
    /// 过滤特殊字符
    /// </summary>
    /// <param name="s">字符串</param>
    /// <returns>json字符串</returns>
    private static string String2Json(String s)
    {
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < s.Length; i++)
        {
            char c = s.ToCharArray()[i];
            switch (c)
            {
                case '\"':
                    sb.Append("\\\""); break;
                case '\\':
                    sb.Append("\\\\"); break;
                case '/':
                    sb.Append("\\/"); break;
                case '\b':
                    sb.Append("\\b"); break;
                case '\f':
                    sb.Append("\\f"); break;
                case '\n':
                    sb.Append("\\n"); break;
                case '\r':
                    sb.Append("\\r"); break;
                case '\t':
                    sb.Append("\\t"); break;
                default:
                    sb.Append(c); break;
            }
        }
        return sb.ToString();
    }

因为本示例在自动生成div的时候，涉及到了省市联动，根据不同的省市去生成不同的div,所以在js中的文件代码如下：

首先：html中

 <div  class="contact-search">
                        <select id="s1" οnchange="bindcity()" class="sel"></select>
                        <select id="s2" class="sel"></select>
                        <input type="button" value="查询" class="btn" οnclick="bindcontent()" />
                    </div>
                    <div id="divcopy" class="contact-list">

                    </div>

在js中，加载省市如下：

  //加载省
        function bindpro(arr2) {
            var s = document.getElementById('s1');
            for (var i = 0; i < arr2.length; i++) {
                var op = document.createElement('option');
                op.innerText = arr2[i];
                op.value = arr2[i];
                s.appendChild(op);
            }
        }
        //加载市
        function bindcity() {
            var ss = document.getElementById('s1');
            var pro = ss.value;
            var s = document.getElementById('s2');
            var br = [];
            for (var i = 0; i < arr.length; i++)
            {
                if (pro == arr[i].province)
                {
                    br.push(arr[i].region);
                }
            }
            br = br.unique1();
            s.innerHTML = '';
            var opp = new Option("全部区域", "all");
            opp.innerText = "全部区域";
            s.appendChild(opp);
            
            //s.innerHTML = "<option >全部区域</option>";
            for (var i = 0; i < br.length; i++) {
                    var op = document.createElement('option');
                    op.innerText = br[i];
                    op.value = br[i];
                    s.appendChild(op);
            }
        }

根据条件动态添加页面的div样式：

 //加载内容
        function bindcontent() {
            var s1 = document.getElementById('s1').value;
            var s2 = document.getElementById('s2').value;
            if (s2 == "all") {
                filldv(false, s1); //以省为查询条件
            } else {
                filldv(true, s2);//以市为查询条件
            }
        }
        function filldv(Iscity, val) {
            var dv = document.getElementById('divcopy');
            dv.innerHTML = "";
            var html = "";
            for (var i = 0; i < arr.length; i++) {
                //var d = document.createElement("div");
                if (Iscity) {
                    
                    if (arr[i].region == val) {
                        html = '<div class="newbox">';
                        //d.className = "";
                        
                        html = html + "<dl><dt>";
                        html = html+ "<h3>" + arr[i].name + "</h3></dt>";
                        html = html + "<dd><img src='" + arr[i].pic + "'/></dd><dt><strong>地址信息</strong></dt>";
                        html = html + "<dd>地址：" + arr[i].adds + "</dd>";
                        if (arr[i].postcode != null && arr[i].postcode != "")
                        {
                            html = html + "<dd>邮编：" + arr[i].postcode + "</dd>";
                        }
                        html = html + "<dd>电话：" + arr[i].tele + "</dd>";
                        if (arr[i].phone != null && arr[i].phone != "")
                        {
                            html = html + "<dd>传真：" + arr[i].phone + "</dd>";
                        }
                        if (arr[i].traffic != null && arr[i].traffic != "") {
                            html = html + "<dd>路线：" + arr[i].traffic + "</dd>";
                        }
                        //dt.innerHTML = html;
                        html = html + "<a href='javascript:void(0);' οnclick='window.open(\"/front/contact/showmap.aspx?id=" + arr[i].id + "\",\"newwindow\", \"height=480, width=640, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no\");return false;' target='_blank'>查看地图</a>";
                        //dl.appendChild(dt);
                        //d.appendChild(dl);
                        html = html + "</dl></div>";
                        //dv.innerHTML = html;
                    }
                } else {

                    if (arr[i].province == val) {
                        html = '<div class="newbox">';
                        html = html + "<dl><dt>";
                        html = html + "<h3>" + arr[i].name + "</h3>";
                        html = html + "<dd><img src='" + arr[i].pic + "'/></dd><dt><strong>地址信息</strong></dt>";
                        html = html + "<dd>地址：" + arr[i].adds + "</dd>";
                        if (arr[i].postcode != null && arr[i].postcode != "") {
                            html = html + "<dd>邮编：" + arr[i].postcode + "</dd>";
                        }
                        html = html + "<dd>电话：" + arr[i].tele + "</dd>";
                        if (arr[i].phone != null && arr[i].phone != "") {
                            html = html + "<dd>传真：" + arr[i].phone + "</dd>";
                        }
                        if (arr[i].traffic != null && arr[i].traffic != "") {
                            html = html + "<dd>路线：" + arr[i].traffic + "</dd>";
                        }
                        
                        html = html + "<a href='javascript:void(0);' οnclick='window.open(\"/front/contact/showmap.aspx?id=" + arr[i].id + "\",\"newwindow\", \"height=480, width=640, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no\");return false;' target='_blank'>查看地图</a>";
                        
                        html = html + "</dl></div>";
                    }
                }
                //dv.appendChild(d);
                dv.innerHTML = dv.innerHTML + html;
                html = '';
            }
            
        }

区域排重，为了兼容ie低版本，indexof函数重新定义了：

if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (elt /*, from*/) {
        var len = this.length >>> 0;
        var from = Number(arguments[1]) || 0;
        from = (from < 0)
             ? Math.ceil(from)
             : Math.floor(from);
        if (from < 0)
            from += len;
        for (; from < len; from++) {
            if (from in this &&
                this[from] === elt)
                return from;
        }
        return -1;
    };
}
Array.prototype.unique1 = function () {
    var n = []; //一个新的临时数组
    for (var i = 0; i < this.length; i++) //遍历当前数组
    {
        //如果当前数组的第i已经保存进了临时数组，那么跳过，
        //否则把当前项push到临时数组里面
        if (n.indexOf(this[i]) == -1) n.push(this[i]);
    }
    return n;
}

以上就是全部的（.net）ajax+json+catch缓存+js控制页面动态生成div的过程，如果需要其中一部分可以从中摘取