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 相关文章推荐
比较简单的异步加载JS文件的代码
Jul 18 Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
JavaScript使用localStorage存储数据
Sep 25 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
在项目中寻找代码的坏命名
2012/07/14 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python中分数的相关使用教程
2015/03/30 Python
python获取当前日期和时间的方法
2015/04/30 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
港湾网络笔试题
2014/04/19 面试题
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书