ajax asynchronous refresh to update the database

ajax asynchronous refresh to update the database_jquery

WBOY

Release： 2016-05-16 17:47:38

Original

2585 people have browsed it

The previous article was all about the interface. Next, I will write about how to write data into the database without refreshing.

When we change a certain score of a person or a few people, it can be written to the database without refreshing.
First, we need to declare the XMLHttpRequest object

Copy code The code is as follows:

 
// Declare XMLHttpRequest object 
var xmlHttp; 
function createXMLHTTP() { 
if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest(); //Mozilla browser 
} 
else if (window.ActiveXObject) { 
try { 
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //Old version of IE
} 
catch (e) 
{ } 
try { 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //New version of IE
} 
catch (e) 
{ } 
if (!xmlHttp) { 
window.alert("Cannot create XMLHttpRequest object instance!"); 
return false; 
} 
} 
} 

At the same time, a callback function is needed to determine whether Modification successful

Copy code The code is as follows:

 
//Update or add record callback function ( Check whether the score is successful) 
function ModifyScore () 
{ 
if (xmlHttp.readyState == 4) 
{ 
// if (xmlHttp.status == 200) 
{ 
if (xmlHttp.responseText == "true") 
{ 
} 
else 
{ 
// alert("Rating failed, please re-rate or contact the administrator" ); 
} 
} 
} 
} 

After the preparation is completed, the following is the key step:
Because it needs to be written when modifying the score Enter the database, so you only need to execute this piece of code to change the drop-down box value (when looping through selected items) as mentioned in the previous blog:

Copy code The code is as follows:

 
//Get the mutual review ID 
var criticsID = checkbox[i].value; 
//Write the modified value into the database
 //Get the project score
var scoreAll = document.getElementById("score" checkbox[i].value srcElem.id ""); 
var accessAllScore = scoreAll.outerText; 
//Get the project number
var assess = document.getElementById("assess" srcElem.id); 
var assessID = assess.title; 
createXMLHTTP(); //Create an XMLHttpRequest object
//Transfer data to another A page executes 
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); 
 

Finally, we only need to get the parameters in CriticsAgainAjax.aspx and write to the database

Copy code The code is as follows:

 
//Get parameters
if(Request.QueryString["Event"].ToString() == "allCriticsInfo") 
{ 
string criticsID = Request.QueryString["criticsID"].ToString(); 
string assessID = Request.QueryString["assessID"].ToString(); 
string accessAllScore =Request.QueryString["accessAllScore"].ToString( ); 
} 

After the parameters are passed, writing to the database is very easy, so I won’t mention it here.
In this way, the effect displayed in the foreground is that there is no refresh, and the data is written to the database from time to time. Just leave all the dirty work to the CriticsAgainAjax.aspx page, which is also a good division of labor.
In addition to less refreshing, another advantage of writing this is that ajax is an asynchronous operation, that is, after the data is thrown to CriticsAgainAjax.aspx in the js page, it will continue to execute without considering whether CriticsAgainAjax.aspx has been completed. , it may take 100 pieces of data to be thrown, and it takes three seconds to write to the database, and the time to throw it is very fast, maybe only a few tenths of a second, so the user will feel very good, and he does not need to wait for half a day after selecting to continue. implement.