ajax异步刷新实现更新数据库


Posted in Javascript onDecember 03, 2012

上篇文章都是关于界面的东西,下面写关于如何把无刷新的把数据写入到数据库中。
ajax异步刷新实现更新数据库
当我们改变某一个人或某几个人的某项分值实现无刷新写入数据库。
首先,我们需要声明XMLHttpRequest对象

//声明XMLHttpRequest对象 
var xmlHttp; 
function createXMLHTTP() { 
if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest(); //Mozilla浏览器 
} 
else if (window.ActiveXObject) { 
try { 
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //IE老版本 
} 
catch (e) 
{ } 
try { 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本 
} 
catch (e) 
{ } 
if (!xmlHttp) { 
window.alert("不能创建XMLHttpRequest对象实例!"); 
return false; 
} 
} 
}

同时,需要回调函数来确定是否修改成功
//更新或者添加记录的回调函数(检验是否评分成功) 
function ModifyScore () 
{ 
if (xmlHttp.readyState == 4) 
{ 
// if (xmlHttp.status == 200) 
{ 
if (xmlHttp.responseText == "true") 
{ 
} 
else 
{ 
// alert("评分失败,请重新评分或者与管理员联系"); 
} 
} 
} 
}

准备工作完成之后,下面就是关键的一步:
因为需要在修改分值的时候写入数据库,所以只需要在上篇博客中提高的改变下拉框值(循环选中项时)的执行这样一段代码:
//获取互评ID 
var criticsID = checkbox[i].value; 
//把修改值写入数据库 
//获取项目分数 
var scoreAll = document.getElementById("score" +checkbox[i].value + srcElem.id + ""); 
var accessAllScore = scoreAll.outerText; 
//获取项目编号 
var assess = document.getElementById("assess" + srcElem.id); 
var assessID = assess.title; 
createXMLHTTP(); //创建XMLHttpRequest对象 
//把数据传入到另一个页面执行 
var url = "CriticsAgainAjax.aspx?criticsID=" + criticsID +"&assessID=" + assessID + "&accessAllScore=" +accessAllScore + "&Event=allCriticsInfo"; 
xmlHttp.open("Post", url, true); 
// xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
xmlHttp.onreadystatechange = AnswerOneKindQuestion; 
xmlHttp.send(null);

最后,我们只需要在CriticsAgainAjax.aspx获取参数,并执行写入数据库就可以了
//获取参数 
if(Request.QueryString["Event"].ToString() =="allCriticsInfo") 
{ 
string criticsID = Request.QueryString["criticsID"].ToString(); 
string assessID = Request.QueryString["assessID"].ToString(); 
string accessAllScore =Request.QueryString["accessAllScore"].ToString(); 
}

参数传过来之后,写入数据库就很容易了,这里就不提了。
这样,在前台显示的效果就是没有刷新,时时的把数据写入到数据库。只是把脏活累活都交给CriticsAgainAjax.aspx页面来干,这也是一种不错的分工。
这样写出了少刷新以外,还有另一个好处就是ajax是异步操作,即在js页面中把数据抛到CriticsAgainAjax.aspx之后,他就继续执行,他不考虑CriticsAgainAjax.aspx是否执行完成,可能抛过来100条数据,写入数据库需要三秒钟,而抛过来的时间是非常快的,可能就零点几秒,所以用户的感觉会非常好,他不需要在选中后等半天才能继续执行。
Javascript 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
js实现放大镜特效
May 18 Javascript
Angular网络请求的封装方法
May 22 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
微信小程序引用iconfont图标的方法
Oct 22 Javascript
JavaScript实现下拉列表
Jan 20 Javascript
JavaScript代码复用模式实例分析
Dec 02 #Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 #Javascript
script标签属性type与language使用选择
Dec 02 #Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 #Javascript
json对象转字符串如何实现
Dec 02 #Javascript
javascript 构造函数强制调用经验总结
Dec 02 #Javascript
js精度溢出解决方案
Dec 02 #Javascript
You might like
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
如何在PHP中使用数组
2020/06/09 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
2011/07/26 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
python多行字符串拼接使用小括号的方法
2020/03/19 Python
python实现排序算法解析
2018/09/08 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
django2笔记之路由path语法的实现
2019/07/17 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
毕业生的自我鉴定
2013/10/29 职场文书
公积金单位接收函
2014/01/11 职场文书
公司业务员岗位职责
2014/03/18 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
授权委托书(完整版)
2014/09/10 职场文书
2014年学生会工作总结
2014/11/07 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js