首页 > 蚂蚁部落 > 正文

前台怎样获取后台ajax数据简单介绍
2017-02-10 17:21:58   来源:   评论:0 点击:

可能很多ajax的初学者,对于如何从后台使用ajax在前台显示数据比较迷茫。其实非常的简单,下面就通过代码实例做一下演示。代码实例如下:[HT
可能很多ajax的初学者,对于如何从后台使用ajax在前台显示数据比较迷茫。

其实非常的简单,下面就通过代码实例做一下演示。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><script type="text/javascript">function creatXMLHttpRequest() {  var xmlhttp;  if (window.XMLHttpRequest) {    xmlhttp = new XMLHttpRequest();  }  else {    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  }  return xmlhttp;} window.onload = function(){  var odiv = document.getElementById("antzone");  var obt = document.getElementById("bt");  obt.onclick = function () {    var xmlHttpObject = creatXMLHttpRequest();    xmlHttpObject.onreadystatechange = function () {      if (xmlHttpObject.readyState == 4 && xmlHttpObject.status == 200) {        document.getElementById("antzone").innerHTML = xmlHttpObject.responseText;      }    }    xmlHttpObject.open("get", "demo/ajax/net/getDate.ashx", true);    xmlHttpObject.send();  }}</script></head><body><div id="antzone"></div><input type="button" id="bt" value="查看效果"/></body></html>

上面的代码实现了我们的要求,就是从数据读取数据,然后以表哥的形式显示出来。

下面是c#后台代码:

[C#] 纯文本查看 复制代码
namespace ajax{    /// <summary>    /// getDate 的摘要说明    /// </summary>    public class getDate : IHttpHandler    {         public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            string tableStr = "<table>";            DataSet ds = done();            if (ds.Tables[0].Rows.Count > 0)             {                 for(int index=0;index<ds.Tables[0].Rows.Count;index++)                {                    tableStr = tableStr                     + "<tr><td>"                    + ds.Tables[0].Rows[index]["username"].ToString() + "</td><td>"                    + ds.Tables[0].Rows[index]["address"].ToString() + "</td></tr>";                }                tableStr=tableStr+"</table>";            }            context.Response.Write(tableStr);        }        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;        }         public bool IsReusable        {            get            {                return false;            }        }    }}

面的效果是通过原生javascript实现的,当前使用jQuery更为方便一些。

相关热词搜索:

上一篇:兼容IE低版本的XMLHttpRequest对象的创建
下一篇:验证邮箱是否已经注册介绍

分享到: 收藏
评论排行