本文实现的功能是:如下面流程图所示
调用的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的过程,如果需要其中一部分可以从中摘取