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

所属分类: 网络编程 / JavaScript 阅读数: 1117
收藏 0 赞 0 分享
上篇文章都是关于界面的东西,下面写关于如何把无刷新的把数据写入到数据库中。

当我们改变某一个人或某几个人的某项分值实现无刷新写入数据库。
首先,我们需要声明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 this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多