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 相关文章推荐
表格单元格交错着色实现思路及代码
Apr 01 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
js获取json元素数量的方法
Jan 27 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
简介JavaScript错误处理机制
Aug 04 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
Python中几种导入模块的方式总结
2017/04/27 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
校园报刊亭创业计划书
2014/01/02 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
校外活动方案
2014/08/28 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS