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条数据,写入数据库需要三秒钟,而抛过来的时间是非常快的,可能就零点几秒,所以用户的感觉会非常好,他不需要在选中后等半天才能继续执行。

(0)

相关推荐

  • php+jQuery+Ajax简单实现页面异步刷新

    页面显示如下: JQueryAjax.html中的代码如下(用的较为简单的$.post) <html> <head> <meta charset="UTF-8"> <title>JQueryAjax+PHP</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"

  • asp.net jquery+ajax异步刷新实现示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

  • ajaxpro.dll 控件实现异步刷新页面

    html代码 复制代码 代码如下: <script type="text/javascript"><!-- function getUserName() { Demo.ajax.GetUserName(document.getElementById("accout").value,getName); } function getName(respone) { document.getElementById("passowrd")

  • 如何手写Ajax实现异步刷新

    所谓的异步刷新,就是不刷新整个网页进行更新数据. 只有通过js才能实现Ajax,进而实行异步刷新 表单提交数据和Ajax提交数据的区别:表单提交是提交的整个页面中的数据,提交数据之后会抛弃之前的页面(刷新页面):ajax是在当前页面提取某些数据并提交出去,并能接收返回来的数据,处理之后进而显示在当前页面(不刷新页面). [例子]==验证用户名是否重复== 使用Ajax的思路:在要刷新的页面中写js和Ajax代码,把数据提交给另一个页面,在Page_Load中写查询代码并把结果返回到刷新的页面.

  • jQuery使用$.ajax进行异步刷新的方法(附demo下载)

    本文实例讲述了jQuery使用$.ajax进行异步刷新的方法.分享给大家供大家参考,具体如下: 最近要用到jquery进行异步读取数据的功能,jquery提供了许多内置的异步读取函数,给大家演示下最常用的$.ajax用法 在客户端文本框输入一个内容,然后在服务器端返回时间 在DEMO中要用到ashx文件,用于获取服务器的信息 效果图片 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 客户端代码 <%@ Page Language="C#" Au

  • Ajax实现异步刷新验证用户名是否已存在的具体方法

    都是简单的实例,所以直接发代码 静态页面Ajax.html 复制代码 代码如下: <html>    <head>        <title>Ajax</title>        <script type="text/javascript">            function loadXMLDoc() {                if (document.getElementById("account

  • jQuery ajax请求struts action实现异步刷新

    这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换,第二种是采用goole的gson-2.1.jar来转换,大家可以根据需要导入相应的jar包,在这里为了做测试将两种jar包都导入了.下面开始进入正题 第一步:导入相关jar包,本样例需导入struts相关jar包,json-lib.jar,gson-2.1.jar可以任意选择,但是这里需要都导入,因

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

    上篇文章都是关于界面的东西,下面写关于如何把无刷新的把数据写入到数据库中. 当我们改变某一个人或某几个人的某项分值实现无刷新写入数据库. 首先,我们需要声明XMLHttpRequest对象 复制代码 代码如下: //声明XMLHttpRequest对象 var xmlHttp; function createXMLHTTP() { if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //Mozilla浏览器 } else if

  • Ajax异步刷新功能及简单案例

    目录 GET请求 POST请求 几个一会儿会用到的知识点: 1.xmlhttp.readyState==4 && xmlhttp.status==200 2.针对IE6及以下的版本浏览器的兼容处理 3.onblur事件 操作演示 HTML代码 php代码部分: 1.checkUsername部分: 2.checkEmail部分 3.checkPhone部分 这篇文章主要来介绍一下有关ajax中异步刷新的知识,以及一个简单的注册案例. 我们都知道,异步刷新是ajax中非常重要的一个功能,下面

  • ajax提交手机号去数据库验证并返回状态值

    本文实例为大家分享了ajax提交手机号去数据库的具体代码,并返回状态值,供大家参考,具体内容如下 <script type="text/javascript"> $(function(){ $('.agree_regi').click(function(){ var phone = $.trim($("#phone").val()); if(phone == ""){ NewAlert(2,"请输入手机号",nul

  • php+mysqli使用面向对象方式更新数据库实例

    本文实例讲述了php+mysqli使用面向对象方式更新数据库的方法,分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <?php //第一步:创建数据连接对象 $mysqli = new MySQLi("localhost","root","123456");//默认的 MySQL的类,其属性与方法见手册 if($mysqli->connect_error){//connect_error为属性,报错  die(&quo

  • JDBC程序更新数据库中记录的方法

    本文实例讲述了JDBC程序更新数据库中记录的方法.分享给大家供大家参考,具体如下: 使用JDBC程序(Eclipse.MyEclipse)更新数据库(MySql)中的记录时可以只修改记录的一个字段或几个字段,具体方法为可以加入如下被注释代码(前提是修改之前可以从数据库中得到该条记录)以user表为例 public class UserDaoJdbcImpl implements UserDao { public void update(User u) { Connection conn = nu

  • Python更新数据库脚本两种方法及对比介绍

    最近项目的两次版本迭代中,根据业务需求的变化,需要对数据库进行更新,两次分别使用了不同的方式进行更新. 第一种:使用python的MySQLdb模块利用原生的sql语句进行更新 import MySQLdb #主机名 HOST = '127.0.0.1' #用户名 USER = "root" #密码 PASSWD = "123456" #数据库名 DB = "db_name" # 打开数据库连接 db=MySQLdb.connect(HOST,U

  • C#使用DataSet Datatable更新数据库的三种实现方法

    本文以实例形式讲述了使用DataSet Datatable更新数据库的三种实现方法,包括CommandBuilder 方法.DataAdapter 更新数据源以及使用sql语句更新.分享给大家供大家参考之用.具体方法如下: 一.自动生成命令的条件 CommandBuilder 方法 a)动态指定 SelectCommand 属性 b)利用 CommandBuilder 对象自动生成 DataAdapter 的 DeleteCommand.InsertCommand 和 UpdateCommand

  • C#连接数据库和更新数据库的方法

    对数据库的操作总体可以分为两类:查询(select)和更新(insert,delete,update).为什么这样来分呢?仔细看看两类的区别,select只是从数据库中将数据拿出来使用,而其余三者都会对数据库的物理数据进行修改.这篇文章将接着阐述更新数据. 更新数据库信息首先是连接数据库,对数据库的更新需要一个对象:OleDbCommand.该对象表示要对数据源执行的SQL语句或存储过程. 这个对象有三个属性:1.CommandText表示要设置命令的文本:2.Connection表示要设置命令

  • php+ajax 实现输入读取数据库显示匹配信息

    废话不多说了,直接跟大家贴代码了 dropbox_index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • 使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

    首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province:省份表 city: 城市表 如图: 然后再在java中建立相关的实体类与之对应 再然后,我们就能开始做jdbc的操作了 public class ConnectionFactory { private static String driver; private static String url; private static String user; private static String password;

随机推荐