生成html页如何更新文章浏览次数
利用强大的jquery的AJAX功能,可以很方便的实现,由于本人js水平有限,研究了2天才搞出来,期间主要参考了关于jquery的中文手册等资料,所以感觉掌握这些基本知识后做起东西来就随心所欲了,好了进入正题!
关于ASP.NET动转静技术这里就不讨论了,网上有很多资料。现在是生成静态页后如何更新文章浏览次数
这里需要掌握jquery ajax相关知识,
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。
注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。
$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。
jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。
这里我采用$get()方式,简单的,如果要实现错误处理需要采用高级的$ajax方式;
首先在页面要加载jquery.js(可到官网下载,最新版本)
<script language="javascript" type="text/javascript" src="../js/jquery.js"></script>
另外我生成的每篇文章是以id编号来命名的 要知道浏览的是那篇文章只需要传递文章编号就可以了
实际我们需要一个函数来处理
<script language="javascript" type="text/javascript" src="../js/GetData.js?id=12"></script>
我们通过这样的方式把文章编号传进去 做模板的时候这样也很方便替换。现在是js函数怎么接受这个id=12的参数呢?
参考网上,找到一个非常好的方法,这里我就直接贴源码了哈!
//读取文章浏览次数2
var getArgs=(3
function(){4
var sc=document.getElementsByTagName('script');5
var paramsArr=sc[sc.length-1].src.split('?')[1].split('&');6
var args={},argsStr=[],param,t,name,value;7
for(var ii=0,len=paramsArr.length;ii<len;ii++){8
param=paramsArr[ii].split('=');9
name=param[0],value=param[1];10
if(typeof args[name]=="undefined"){ //参数尚不存在11
args[name]=value;12
}else if(typeof args[name]=="string"){ //参数已经存在则保存为数组13
args[name]=[args[name]]14
args[name].push(value);15
}else{ //已经是数组的16
args[name].push(value);17
}18
}19
/*在实际应用中下面的showArg和args.toString可以删掉,这里只是为了测试函数getArgs返回的内容*/20
// var showArg=function(x){ //转换不同数据的显示方式21
// if(typeof(x)=="string"&&!/\d+/.test(x)) return "'"+x+"'"; //字符串22
// if(x instanceof Array) return "["+x+"]" //数组23
// return x; //数字24
//}25
26
// 组装成json格式27
// args.toString=function(){28
// for(var ii in args) argsStr.push(ii+':'+showArg(args[ii]));29
// return '{'+argsStr.join(',')+'}';30
// } 31
return function(){return args;} //以json格式返回获取的所有参数 32
}33
)();34

35
//alert(getArgs());36
//alert("id:"+getArgs()["id"]);37

38
var fid=getArgs()["id"];39
$( function GetHits(){$.get("../WebControls/BackHandler.ashx", {id: fid},function(data){40
var temparr=data;41
temparr=temparr.split(",");42
$("#hits").html(temparr[0]);43
$("#renum").html("评论数:"+temparr[1]);44
$("#load").hide();}); })好了,至于以get方式传递参数到后台处理就很简单 以上代码已经包含,我就不多解释了。
下面是后台处理程序 ashx
<%@ WebHandler Language="C#" Class="BackHandler" %>2

3
using System;4
using System.Data;5
using System.Web;6
using System.Collections;7
using System.Web.Services;8
using System.Web.Services.Protocols;9
using System.Configuration;10
using System.Text;11
using System.Xml;12
using Common;13
using System.Data.SqlClient;14

15
public class BackHandler : IHttpHandler {16
17
public void ProcessRequest (HttpContext context) {18
context.Response.ContentType = "text/plain";19
//不让浏览器缓存20
context.Response.Buffer = true;21
context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);22
context.Response.AddHeader("pragma", "no-cache");23
context.Response.AddHeader("cache-control", "");24
context.Response.CacheControl = "no-cache";25

26
string result = "";27
if (context.Request.Params["id"] != null)28
{29
int id = Convert.ToInt32(context.Request.Params["id"]);30
SqlParameter[] sqlParameter ={ 31
new SqlParameter("@ArticleId",SqlDbType.Int,4)32
};33
sqlParameter[0].Value = id;34

35
SqlDataReader reader = SqlHelper.ExecuteReader(SqlHelper.ConnectionStringLocalTransaction, CommandType.StoredProcedure, "News_GetHits", sqlParameter);36
if (reader.Read())37
{38
result = reader["Hits"].ToString()+",";39
result += reader["RemarkNum"].ToString();40
}41
42
context.Response.Write(result);43

44
}45
46
47
}48
49
50
public bool IsReusable {51
get {52
return false;53
}54
}55

56
}另外数据库存储过程代码 News_GetHits
CREATE PROCEDURE News_GetHits
@ArticleId int
AS
update Article set Hits=Hits+1 where ArticleId=@ArticleId
select ArticleId,Hits,RemarkNum from Article where ArticleId=@ArticleId
GO完工



浙公网安备 33010602011771号