首頁 > web前端 > js教程 > ajax異步刷新實現更新資料庫_jquery

ajax異步刷新實現更新資料庫_jquery

WBOY
發布: 2016-05-16 17:47:38
原創
2621 人瀏覽過

上篇文章都是關於介面的東西,下面寫關於如何把無刷新的把資料寫入到資料庫中。

當我們改變某一個人或某幾個人的某項分數實現無刷新寫入資料庫。
首先,我們需要聲明XMLHttpRequest對象

複製代碼 代碼如下:

//宣告XMLHttpRequest物件
var xmlHttp;
function createXMLHTTP() {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); 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", , CriticsInfo";
// 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條數據,寫入資料庫需要三秒鐘,而拋過來的時間是非常快的,可能就零點幾秒,所以用戶的感覺會非常好,他不需要在選中後等半天才能繼續執行。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板