ajax實現的點選按鈕能夠實現數字加1功能

admin發表於2017-02-10
大家一定都見過或者使用過那種類似的投票功能，點選按鈕就可以實現數字加1，並且能夠實時顯示。

下面就通過程式碼例項介紹一下如何利用ajax結合資料庫和後臺語言實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script>
function done(add) {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("antzone").innerHTML = xmlhttp.responseText;
    }
  }
  if (add != undefined) {
    xmlhttp.open("get", "demo/ajax/net/count.ashx?keyword=add", true);
  } else {
    xmlhttp.open("get", "demo/ajax/net/count.ashx", true);
  }
  xmlhttp.send();
}
window.onload = function () {
  var otxt = document.getElementById("txt");
  var obt = document.getElementById("bt");
  done();
  obt.onclick = function () {
    done("add");
  }
}
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼實現了我們的要求，下面給出後臺程式碼:

[C#] 純文字檢視 複製程式碼
public class count1 : IHttpHandler
{
 
        public void ProcessRequest(HttpContext context)
        {
            string keywords = context.Request.QueryString["keyword"];
            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 sqlUpdate = "update [count] set hits=hits+1 where id=1";
            string sqlReader = "select hits from [count] where id=1";
            string num;
            if (String.IsNullOrEmpty(keywords))
            {
                num = reader(sqlReader, conn);
            }
            else
            {
                num = done(sqlUpdate, sqlReader, conn);
                 
            }
            context.Response.Write(num);
        }
 
        private string done(string sqlUpdate, string sqlReader, OleDbConnection conn)
        {
            OleDbCommand cmdUpdate = new OleDbCommand(sqlUpdate, conn);
 
            OleDbCommand cmdReader = new OleDbCommand(sqlReader,conn);
            OleDbDataAdapter da = new OleDbDataAdapter(cmdReader);
 
            conn.Open();
            cmdUpdate.ExecuteNonQuery();
 
             DataSet ds = new DataSet();
             da.Fill(ds, "ds");
             cmdReader.Parameters.Clear();
             if (ds.Tables[0].Rows.Count > 0)
             {
                 return ds.Tables[0].Rows[0]["hits"].ToString();
             }
             else {
                 return "";
             }
        }
 
        private string reader(string sqlReader, OleDbConnection conn) 
        {
            OleDbCommand cmdReader = new OleDbCommand(sqlReader, conn);
            OleDbDataAdapter da = new OleDbDataAdapter(cmdReader);
 
            conn.Open();
            DataSet ds = new DataSet();
            da.Fill(ds, "ds");
            cmdReader.Parameters.Clear();
            if (ds.Tables[0].Rows.Count > 0)
            {
                return ds.Tables[0].Rows[0]["hits"].ToString();
            }
            else
            {
                return "";
            }
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
}

相關文章