jquery使用ajax讀取後臺資料在表格中顯示

antzone發表於2017-04-08
jQuery

本章節介紹一下如何從資料庫讀取資料，然後通過ajax顯示於前臺表格中。

使用原生的方式可以參閱前臺怎樣獲取後臺ajax資料簡單介紹一章節。

下面介紹一下如何使用jquery的ajax實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#bt").click(function () {
    var str = "<table>";
    $.ajax({
      url: "demo/ajax/net/jqueryAjax.ashx",
      data: {},
      type: "get",
      async: true,
      dataType:"json",
      success: function (json) {
        $.each(json, function (index, obj) {
          $.each(obj, function (y, data) {
            str = str + "<tr>";
            str = str + "<td>" + data["username"] 
            + "</td><td>" + data["address"] 
            + "</td><td>" + data["score"] + "</td>";
            str = str + "</tr>";
          })
        })
        str = str + "</tr></table>";
        $("#antzone").html(str);
      }
    });
  })
})
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼實現了我們的要求，通過jquery的ajax方式實現了獲取後臺資料的功能。

c#程式碼如下:

[C#] 純文字檢視 複製程式碼
namespace ajax
{
    /// <summary>
    /// jqueryAjax 的摘要說明
    /// </summary>
    public class jqueryAjax : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            DataSet ds = done();
            string jsonStr = GetJsonByDataset(ds);
            context.Response.Write(jsonStr);
        }
        private DataSet done()
        {
            string connString = ConfigurationManager.ConnectionStrings["access_con"].ConnectionString;
            string configPath = ConfigurationManager.ConnectionStrings["access_path"].ConnectionString;
            string conPath = HttpContext.Current.Server.MapPath(configPath);
            OleDbConnection conn = new OleDbConnection(connString + conPath);
 
            string sql = "select * from code";
            OleDbCommand cmd = new OleDbCommand(sql, conn);
            OleDbDataAdapter da = new OleDbDataAdapter(cmd);
            DataSet ds = new DataSet();
            da.Fill(ds, "ds");
            return ds;
        }
 
        private string GetJsonByDataset(DataSet ds)
        {
            if (ds == null || ds.Tables.Count <= 0 || ds.Tables[0].Rows.Count <= 0)
            {
                //如果查詢到的資料為空則返回標記ok:false
                return "{\"ok\":false}";
            }
            StringBuilder sb = new StringBuilder();
            sb.Append("{");
            foreach (DataTable dt in ds.Tables)
            {
                sb.Append(string.Format("\"{0}\":[", dt.TableName));
 
                foreach (DataRow dr in dt.Rows)
                {
                    sb.Append("{");
                    for (int i = 0; i < dr.Table.Columns.Count; i++)
                    {
                        sb.AppendFormat("\"{0}\":\"{1}\",", dr.Table.Columns[i].ColumnName.Replace("\"", "\\\"").Replace("\'", "\\\'"), ObjToStr(dr[i]).Replace("\"", "\\\"").Replace("\'", "\\\'")).Replace(Convert.ToString((char)13), "\\r\\n").Replace(Convert.ToString((char)10), "\\r\\n");
                    }
                    sb.Remove(sb.ToString().LastIndexOf(','), 1);
                    sb.Append("},");
                }
 
                sb.Remove(sb.ToString().LastIndexOf(','), 1);
                sb.Append("],");
            }
            sb.Remove(sb.ToString().LastIndexOf(','), 1);
            sb.Append("}");
            return sb.ToString();
        }
        private string ObjToStr(object ob)
        {
            if (ob == null)
            {
                return string.Empty;
            }
            else
                return ob.ToString();
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

相關文章