ajax異步刷新實現(xiàn)更新數(shù)據庫
更新時間:2012年12月03日 10:30:59 作者:
下面寫關于如何把無刷新的數(shù)據寫入到數(shù)據庫中,需要的朋友可以參考下
上篇文章都是關于界面的東西,下面寫關于如何把無刷新的把數(shù)據寫入到數(shù)據庫中。
當我們改變某一個人或某幾個人的某項分值實現(xiàn)無刷新寫入數(shù)據庫。
首先,我們需要聲明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("不能創(chuàng)建XMLHttpRequest對象實例!");
return false;
}
}
}
同時,需要回調函數(shù)來確定是否修改成功
//更新或者添加記錄的回調函數(shù)(檢驗是否評分成功)
function ModifyScore ()
{
if (xmlHttp.readyState == 4)
{
// if (xmlHttp.status == 200)
{
if (xmlHttp.responseText == "true")
{
}
else
{
// alert("評分失敗,請重新評分或者與管理員聯(lián)系");
}
}
}
}
準備工作完成之后,下面就是關鍵的一步:
因為需要在修改分值的時候寫入數(shù)據庫,所以只需要在上篇博客中提高的改變下拉框值(循環(huán)選中項時)的執(zhí)行這樣一段代碼:
//獲取互評ID
var criticsID = checkbox[i].value;
//把修改值寫入數(shù)據庫
//獲取項目分數(shù)
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(); //創(chuàng)建XMLHttpRequest對象
//把數(shù)據傳入到另一個頁面執(zhí)行
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獲取參數(shù),并執(zhí)行寫入數(shù)據庫就可以了
//獲取參數(shù)
if(Request.QueryString["Event"].ToString() =="allCriticsInfo")
{
string criticsID = Request.QueryString["criticsID"].ToString();
string assessID = Request.QueryString["assessID"].ToString();
string accessAllScore =Request.QueryString["accessAllScore"].ToString();
}
參數(shù)傳過來之后,寫入數(shù)據庫就很容易了,這里就不提了。
這樣,在前臺顯示的效果就是沒有刷新,時時的把數(shù)據寫入到數(shù)據庫。只是把臟活累活都交給CriticsAgainAjax.aspx頁面來干,這也是一種不錯的分工。
這樣寫出了少刷新以外,還有另一個好處就是ajax是異步操作,即在js頁面中把數(shù)據拋到CriticsAgainAjax.aspx之后,他就繼續(xù)執(zhí)行,他不考慮CriticsAgainAjax.aspx是否執(zhí)行完成,可能拋過來100條數(shù)據,寫入數(shù)據庫需要三秒鐘,而拋過來的時間是非??斓?,可能就零點幾秒,所以用戶的感覺會非常好,他不需要在選中后等半天才能繼續(xù)執(zhí)行。
當我們改變某一個人或某幾個人的某項分值實現(xiàn)無刷新寫入數(shù)據庫。
首先,我們需要聲明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("不能創(chuàng)建XMLHttpRequest對象實例!");
return false;
}
}
}
同時,需要回調函數(shù)來確定是否修改成功
復制代碼 代碼如下:
//更新或者添加記錄的回調函數(shù)(檢驗是否評分成功)
function ModifyScore ()
{
if (xmlHttp.readyState == 4)
{
// if (xmlHttp.status == 200)
{
if (xmlHttp.responseText == "true")
{
}
else
{
// alert("評分失敗,請重新評分或者與管理員聯(lián)系");
}
}
}
}
準備工作完成之后,下面就是關鍵的一步:
因為需要在修改分值的時候寫入數(shù)據庫,所以只需要在上篇博客中提高的改變下拉框值(循環(huán)選中項時)的執(zhí)行這樣一段代碼:
復制代碼 代碼如下:
//獲取互評ID
var criticsID = checkbox[i].value;
//把修改值寫入數(shù)據庫
//獲取項目分數(shù)
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(); //創(chuàng)建XMLHttpRequest對象
//把數(shù)據傳入到另一個頁面執(zhí)行
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獲取參數(shù),并執(zhí)行寫入數(shù)據庫就可以了
復制代碼 代碼如下:
//獲取參數(shù)
if(Request.QueryString["Event"].ToString() =="allCriticsInfo")
{
string criticsID = Request.QueryString["criticsID"].ToString();
string assessID = Request.QueryString["assessID"].ToString();
string accessAllScore =Request.QueryString["accessAllScore"].ToString();
}
參數(shù)傳過來之后,寫入數(shù)據庫就很容易了,這里就不提了。
這樣,在前臺顯示的效果就是沒有刷新,時時的把數(shù)據寫入到數(shù)據庫。只是把臟活累活都交給CriticsAgainAjax.aspx頁面來干,這也是一種不錯的分工。
這樣寫出了少刷新以外,還有另一個好處就是ajax是異步操作,即在js頁面中把數(shù)據拋到CriticsAgainAjax.aspx之后,他就繼續(xù)執(zhí)行,他不考慮CriticsAgainAjax.aspx是否執(zhí)行完成,可能拋過來100條數(shù)據,寫入數(shù)據庫需要三秒鐘,而拋過來的時間是非??斓?,可能就零點幾秒,所以用戶的感覺會非常好,他不需要在選中后等半天才能繼續(xù)執(zhí)行。
您可能感興趣的文章:
- bootstrapTable+ajax加載數(shù)據 refresh更新數(shù)據
- Vue.js 通過jQuery ajax獲取數(shù)據實現(xiàn)更新后重新渲染頁面的方法
- Vue2.X 通過AJAX動態(tài)更新數(shù)據
- jquery+ajaxform+springboot控件實現(xiàn)數(shù)據更新功能
- 利用jQuery及AJAX技術定時更新GridView的某一列數(shù)據
- jquery ajax 局部無刷新更新數(shù)據的實現(xiàn)案例
- Ajax異步無刷新對局部數(shù)據更新
- ajax頁面無刷新 IE下遭遇Ajax緩存導致數(shù)據不更新的問題
- ajax更新數(shù)據后,jquery、jq失效問題
- Ajax實現(xiàn)表格中信息不刷新頁面進行更新數(shù)據
相關文章
JQuery中如何傳遞參數(shù)如click(),change()等具體實現(xiàn)
有個需求讓兩個select中option相互轉換,這個作業(yè)就是給幾個按鈕添加click()事件接下來為大家介紹下如何在click(),change()傳遞參數(shù)2013-04-04
jQuery Easyui datagrid/treegrid 清空數(shù)據
這篇文章主要介紹了jQuery Easyui datagrid/treegrid 清空數(shù)據的相關資料2016-07-07
BootStrap中按鈕點擊后被禁用按鈕的最佳實現(xiàn)方法
在項目開發(fā)中經常會遇到這樣的功能,為了防止在Bootstrap中點擊按鈕多次提交,所以希望點擊按鈕后禁用按鈕。怎么實現(xiàn)此功能呢?今天腳本之家小編給大家分享BootStrap中按鈕點擊后被禁用按鈕的最佳實現(xiàn)方法,非常不錯,感興趣的朋友參考下吧2016-09-09
JQuery事件e參數(shù)的方法preventDefault()取消默認行為
JQuery事件的e參數(shù)的方法preventDefault()可以取消對象的默認行為,下有個不錯的示例,大家可以參考下,希望對大家有所幫助2013-09-09

