ajax点赞功能
用Repeater绑定数据,点赞功能,老大催着要,也没有太大的访问量暂时没写 数据并发
后台写方法读出点赞数据
开始写jQuery
//jquery基本语法就不细说了
<script type="text/javascript">
$(function(){
$(".img_zan").mouseover(function(){
$(this).children().attr("src","images/t_fwsc/Thumb_mouseover1.png");
});
$(".img_zan").mouseout(function(){
$(this).children().attr("src","images/t_fwsc/s-4.png");
});
$(".img_zan").click(function(){
$(this).children().attr("src","images/t_fwsc/Thumb_up2.png");
// $(".add0").removeClass("add_1");
// $(".add0").addClass("add_piao");
// $(".add0").animate({top:"-100px",opacity:'0'},"slow");
/******************************加一样式开始******************************/
$(this).next().children().children().next(".add0").removeClass("add_1");
$(this).next().children().children().next(".add0").addClass("add_piao");
$(this).next().children().children().next(".add0").animate({top:"-200px",opacity:'0'},"slow");
/******************************加一样式开始******************************/
var _a= parseInt($(this).next().text());//当前点赞数
var b="1";//嘻嘻,命名不规范了,测试用的
var masterId=$("#MasterId").val();//用户Id
var orgId=$(this).siblings("#OrgId").val();//联盟医院Id
//之前接触过Ajax,好久不写前端快忘干净了,看了看Jquery的API ----》》》http://www.w3school.com.cn
$.ajax({
url:"/ashx/MasterPraiseAjax.ashx", //发送请求的地址 Get请求方式
data:{WebName:b,masterId:masterId,OrgId:orgId},//参数 必须以键值对传递 master
async:false,//类型:Boolean 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
success:function(data){ //返回值
if(data=="-1")//未登录情况下跳转
{
location.href = "Login.aspx"; //location.href实现客户端页面的跳转
}else if(data=="1"){ //点赞
_a+=1;
//alert(data);
}else if(data=="0"){ //取消点赞
_a-=1;
}else{
_a+=1;
}
}
});
$(this).next().children().text(_a);//给点赞数量重新赋值 (+1or-1)
$(this).removeClass("img_zan").addClass("img0");
$(this).next().removeClass("zanshu").addClass("zanshu0");
});
});
</script>
//下面是一般处理程序
using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Web.SessionState;
using Common;
using Model.Linq;
namespace Web.ashx
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MasterPraiseAjax : IHttpHandler, IReadOnlySessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//Ajax传递的参数值
string a = context.Request.QueryString["WebName"];
string masterId = context.Request.QueryString["masterId"];
string orgId = context.Request.QueryString["orgId"];
try
{
if (masterId.IsNullOrEmptyOrWhiteSpace())
{
context.Response.Write("-1");
}
else
{
//一下就是点赞状态的操作的 数据量大的话不建议用如下写法,之后会研究一下 并发点赞 偷了懒了
if (!a.IsNullOrEmptyOrWhiteSpace())
{
phDataContext ph = new phDataContext();
PetMasterPraise prais = ph.PetMasterPraise.Where(p=>p.PetMasterId==Convert.ToInt32(masterId)&&p.SourceId==Convert.ToInt32(orgId)&&p.SourceType==2).FirstOrDefault();
//点赞
if (prais == null)
{
PetMasterPraise praise = new PetMasterPraise();
praise.PetMasterId = Convert.ToInt32(masterId);
praise.SourceId = Convert.ToInt32(orgId);
praise.SourceType = 2;
praise.CreateDate = DateTime.Now;
praise.State = 1;
praise.Title = "联盟点赞";
ph.PetMasterPraise.InsertOnSubmit(praise);
ph.SubmitChanges();
context.Response.Write(praise.State);
}
//点赞
else if (prais.State == 0)
{
prais.State = 1;
ph.SubmitChanges();
context.Response.Write(prais.State);
}
else
{
//取消点赞
prais.State = 0;
ph.SubmitChanges();
context.Response.Write(prais.State);
}
}
}
}
catch (Exception ex)
{
LogHelper.WriteLog("联盟点赞异常",ex);
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
<div style="height: 30px; width: 150px; float: left; border: 0px;">
<input type="hidden" id='OrgId' value='<%#Eval("Id") %>' />
<div class="img_zan">
<img src="data:images/t_fwsc/s-4.png" /></div>
<div style="height: 30px; width: 60px; float: left; border: 0px;">
<span class="zan_span"><span class="zanshu"><%# StarCount(Eval("Id"),2) %></span><span class="add_1 add0">+1</span>
</span>
</div>
<input type="hidden" runat="server" id="hidPar" value="" />
<div style="height: 30px; width: 20px; float: left; border: 0px;">
</div>
<div style="height: 30px; line-height: 30px; width: 40px; float: left; border: 0px;">
点赞
</div>
</div>
小白一枚 写的多有不合理的地方会慢慢改进...
ajax点赞功能的更多相关文章
- JavaScript cookie操作实现点赞功能
JavaScript cookie操作实现点赞功能 参考实现原理,但是代码不够简洁,简洁代码参考:js操作cookie 实现一个点赞功能十分简单,主要问题在于不能重复点赞. 若是一个有用户的网站,可 ...
- div中加入iframe,可以实现Ajax的功能
div中加入iframe,可以实现Ajax的功能,如果查询的时候,比如说城市的选择,用Ajax去实现, 在.net 可以考虑用UpdatePanel,但是点击了查询刷新表格(表格需要重新刷新加载,非纯 ...
- JavaScript实现评论点赞功能
通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setT ...
- 基于微信小程序的用户列表点赞功能
代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...
- 全栈项目|小书架|微信小程序-点赞功能实现
微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量.需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可. 由于源码都相 ...
- 全栈项目|小书架|服务器端-NodeJS+Koa2 实现点赞功能
效果图 接口分析 通过上面的效果图可以看出,点赞入口主要是在书籍的详情页面. 而书籍详情页面,有以下几个功能是和点赞有关的: 获取点赞状态 点赞 取消点赞 所以项目中理论上与点赞相关的接口就以上三个. ...
- 项目:jSon和Ajax登录功能
组件化网页开发 / 步骤二 · 项目:jSon和Ajax登录功能 要熟练编写封装的$.ajax({........})
- Day8-微信小程序实战-交友小程序-首页用户列表渲染及多账号调试及其点赞功能的实现
在这之前已经把编辑个人的所有信息的功能已经完成了 之后先对首页的列表搞动态的,之前都是写死的静态 1.之前都是把好友写死的,现在就在js里面定义一个数组,用循环来动态的绑定 在onReady中定义,取 ...
- JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现
1 .现在我们要在regist.js中实现ajax的功能,使用用户名到后台查询是否注册,邮箱是否到后台注册,验证码是否正确的功能 我们来看regist.js的代码 //该函数在html文档加载完成之后 ...
随机推荐
- [SDK2.2]Windows Azure Virtual Network (3) 创建AD Server并添加至Virtual Network
<Windows Azure Platform 系列文章目录> 在之前的文章中,笔者已经向大家介绍了如何创建一个简单的Azure Virtual Network. 本章我将创建一台域服务器 ...
- JAVA 设计模式 职责链模式
用途 职责链模式 (Chain Of Responsibility) 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系. 将这个对象连成一条链,并沿着这条链传递该请求,直到有一个 ...
- 转 Windows+VS2013爆详细Caffe编译安装教程
1. 安装cuda Cuda是英伟达推出的GPU加速运算平台 我这里安装的是cuda7.5,已经安装过的忽略,还没有安装过的这里有安装教程.windows下面安装还是非常简单的. 点击打开链接 ...
- PHP的反射机制
在面向对象中最经典的使用就是反射,之前在Java语言中,使用反射可以解耦,用于依赖注入. 在PHP中,同样也有如此强大的地方,我们利用反射来获取一个对象的实例. 首先我们先写一个类: class Te ...
- jQuery源码解读-事件分析
最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventList ...
- JSONP实现跨域
首先提出:什么是跨域?如何解决跨域? 跨域可以简单的理解为从一个域名访问另一个域名,由于javascript的同源政策的限制,出于安全的考虑,不允许浏览器这么做.比如a.com 域名下的js无法操作b ...
- Entity Framework基础01
学习了ADO.NET的相关知识,掌握了它对数据库表的基本操作,但是实际在开发项目应用中微软为我们开发ef这个ORM,使用它可以很方便的利用ADO.NET来操作DBMS,使得我们开发项目的着重点放在业务 ...
- C#2.0 to 4.0
//xmlElement.set_InnerText(value); xmlElement.InnerText = value; ).ToCharArray());//Convert.ToChar(s ...
- jQuery uploadify在谷歌和火狐浏览器下无法上传
原因: 由于jQuery uploadify是借助flash来实现上传的,每一次向后台发送数据流请求时,ie会自动把本地cookie存储捆绑在一起发送给服务器.但firefox.chrome不会这样做 ...
- Web API配置自定义路由
默认访问Web API时,是无需指定method名.它会按照默认的路由来访问.如果你的Web API中出现有方法重载时,也许得配置自定义路由: 标记1为自定义路由,标记2为默认路由,需要把自定义路由排 ...