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

169 阅读 0 评论 112 点赞

我是靠谱客的博主美好煎蛋，最近开发中收集的这篇文章主要介绍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条数据，写入数据库需要三秒钟，而抛过来的时间是非常快的，可能就零点几秒，所以用户的感觉会非常好，他不需要在选中后等半天才能继续执行。