功能描述：從后端數(shù)據(jù)庫讀出多條設(shè)備信息，每條設(shè)備信息生成一個用來更新設(shè)備信息的Form表單。
在
點(diǎn)擊修改按鈕后通過Ajax進(jìn)行無刷新提交 ，且使用jq在Form右側(cè)顯示正在更新
，如果數(shù)據(jù)庫操作失敗則顯示錯誤信息。
規(guī)定時間后提示自動消失。
此功能實(shí)現(xiàn)涉及三個文件
updateface.asp 提供修改界面,代碼如下：
----------------------------------------------------------
<!--#include file="conn.asp" -->
<html>
<head>
<script type="text/javascript" src="jq/jquery-1.4.js"></script>
<script src="update.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":button").click(function(){
$(".tishi").show();
setTimeout("$('.tishi').html('')",6000);
});
});
</script>
<style type="text/css">
<!--
.tishi {
font-size: 12px;
}
-->
</style>
</head>
<body>
<%
strSQL = "select * from test where ProjId=753"
'response.Write(strSQL)
set rs = Server.CreateObject("ADODB.recordset")
rs.Open strSQL, conn
while not rs.eof
MachId=rs("MachId")
MachName=rs("MachName")
MachXH=rs("MachXH")
IdTishi=MachId&"tishi"
%>
<form name="<%=MachId%>">
<input name="MachId" value="<%=MachId%>" type="hidden"/>
設(shè)備名稱：<input name="MachName" value="<%=MachName%>" type="text" />
型號：<input name="Machxh" value="<%=MachXH%>" type="text" />
<label>
<input type="button" name="input" id="input" value="修改" onClick="UpdateMach('<%=MachId%>')">
</label><span id="<%=IdTishi%>" class="tishi"></span>
</form>
<%
rs.movenext
wend
%>
</body>
</html>
================================================================
Update.js 后端js文件，代碼如下：
-------------------------------------------
// JavaScript Document
var xmlHttp
function UpdateMach(FormName)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("您的瀏覽器不支持AJAX！");
return;
}
var url="update.asp";
url=url+"?MachName="+document.getElementById(FormName).MachName.value;
url=url+"&Machxh="+document.getElementById(FormName).Machxh.value;
url=url+"&MachId="+document.getElementById(FormName).MachId.value;
url=url+"&sid="+Math.random();
FormTishi=FormName;
xmlHttp.onreadystatechange=function(){stateChanged(FormTishi)};
xmlHttp.open("get",url,true);
xmlHttp.send(null);
}
function stateChanged(FormTishi)
{
if (xmlHttp.readyState==4)
{
document.getElementById(FormTishi+'tishi').innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
====================================================
update.asp ，數(shù)據(jù)庫修改文件
-----------------------------------------------
<!--#include file="conn.asp" -->
<%
Response.Charset="GB2312"
Response.ContentType="text/html" '加入紅色顯示的兩句就可以解決問題
response.expires=-1
MachName=Trim(Request.QueryString("MachName"))
MachXH=Trim(Request.QueryString("MachXH"))
MachId=Trim(Request.QueryString("MachId"))
'strSQL ="INSERT INTO test(MachName,MachXH,ProjId) VALUES ('"&MachName&"','"&MachXH&"',555)"
strSQL ="Update test set MachName='"&MachName&"',MachXH='"&MachXH&"' Where MachId="&MachId
conn.execute(strSQL)
If Err Then
err.Clear
Response.Write "<img src='images/war.gif' alt='出錯了...' width='13' height='14'/> 有誤，請重新輸入！" '實(shí)際運(yùn)行時應(yīng)該對用戶的輸入在客戶端進(jìn)行驗(yàn)證，避免數(shù)據(jù)庫操作的錯誤。
else
Response.Write "<img src='images/3.gif' alt='更新中...' width='13' height='14'/> 更新中..."
End If
'response.write(strSQL)
%>
