Asp开发 结合ajax、bootstrap知识要点
颛孙霖
@
1.asp语言写在<% %>内
2.数据库查询时候， 形如 sql=“select top 1 id from “&tname&” where “&fname&”=’”®id&"’"
数据表、字段无需引号，但查询的字段条件必须引号
3.ajax 向asp提交数据： ajax.js
//------验证码校验 仅用户名模块完成了修改
var elementsId;
function get_id2(eid2){//接受跨页面的传值
elementsId =eid2;
}
function checkcode(regcode){
var xmlhttp;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4){
if (xmlhttp.status==200){
var data=xmlhttp.responseText;
code_result(data);
}
else{
$("span")[4].innerHTML="验证码校验失败,请联系管理员";
}
}
else{
$("span")[4].innerHTML="正在进行验证码校验...";
}
}
xmlhttp.open("post", "check_code.asp", true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send("regcode="+escape(regcode));
}
function code_result(data){
var resultbox=$("span")[4];
if(data==1){
resultbox.innerHTML='<img src="yesok.gif"/> 验证码正确';
flag[5]=1;
check_data();
}
else{
resultbox.innerHTML='<img src="yesno.gif"/> 验证码错误';
flag[5]=0;
check_data();
}
}
//--------------------------------------------------------------------用户名检测
function checkid(regid,tname,fname){
var xmlhttp;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4){ //4可以获取服务器响应//200交易成功
if (xmlhttp.status==200){
var data=xmlhttp.responseText; //接受asp sql查询返回的结果
//alert(data) ;
id_result(data); //调用函数处理查询返回的结果
}
else{
$(elementsId).innerHTML=" 用户名检测失败,请联系管理员";
}
}
else{
$(elementsId).innerHTML="正在进行用户名校验...";
}
//alert("tname="+tname+"&fname="+fname)
}
xmlhttp.open("post", "check_id.asp", true); //asp数据库查询页面
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send("regid="+escape(regid)+"&tname="+tname+"&fname="+fname);//多个sql查询参数，表名，字段名，字段条件
//send 向后台传递参数 escapse为编码汉字的方式
}
function id_result(data){ //对asp sql查询返回的结果处理
var resultbox=$(elementsId);
if(data==1){
resultbox.innerHTML='<img src="yesok.gif"/> 用户名或名称可用';
flag[4]=1;
check_data();
}
else{
resultbox.innerHTML='<img src="yesno.gif"/> 该用户名或名称已经存在';
flag[4]=0;
check_data();
}
}
//--------------------------------------------------------------------
function sendinfo(regname,pwd,email){
var xmlhttp;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4){
if (xmlhttp.status==200){
var data=xmlhttp.responseText;
reg_result(data);
}
else{
$("span")[5].innerHTML="注册失败,请联系管理员";
}
}
else{
$("span")[5].innerHTML="正在进行用户名注册...";
}
}
xmlhttp.open("post", "reg.asp", true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send("regname="+escape(regname)+"&pwd="+escape(pwd)+"&email="+escape(email));
}
function reg_result(data){
if(data==1){
$("span")[5].innerHTML='<a href="http://cceer.xmu.edu.cn/blog/" target="_blank">'+$("input")[0].value+",您好.请点击这里登陆</a>";
}
else{
$("span")[5].innerHTML="注册失败,请联系管理员";
}
}
4.上面的ajax.js 配合 detect.js 用于验证用户名密码等，
//得到id 可以多个需要验证重复数据的地方调用，获取节点的id，在html中，只需要设定要验证的input中设定好id,如inputid，span的id为inputid+‘span’，上段js可以自动获取，
var elementsId
function getid1(eid){ //维修人查询
var eidvalue =document.getElementById(eid).value;//根据传来的id获取输入框的值
get_id(eid,'bx_wxr', 'wxr') //查询的表名和字段名作为参数
}
function getid2(eid){ //普通用户查询
var eidvalue =document.getElementById(eid).value;//根据传来的id获取输入框的值
get_id(eid,'bx_info', 'username') //查询的表名和字段名作为参数
}
function getid3(eid){ //设备查询
var eidvalue =document.getElementById(eid).value;//根据传来的id获取输入框的值
get_id(eid,'bx_shebei', 'shebei') //查询的表名和字段名作为参数
}
function get_id(eid,tname,fname){ //将onblur传来的数值转为id和span的id
elementsId = eid+"span"; //为提示span标签指定id设为全局变量
get_id2(elementsId);//跨页面传值
$(elementsId);//调用$函数，为提示span标签指定id参数
eidvalue =document.getElementById(eid).value;//根据传来的id获取输入框的值
check_id(eidvalue,tname,fname);//check_id向函数传值检查字符合法性
}
var flag=[0,0,0,0,0,0];
var $=function(eleId){
// 'return document.getElementsByTagName(tagName);
return document.getElementById(eleId)
}
//----------接受协议
function accept_info(){
flag[0]=1;
check_data();
}
//----------拒绝协议
function refuse_info(){
flag[0]=0;
check_data();
}
//----------重置
function reset_info(){
var info=["支持汉字,单词,数字,敏感字符屏蔽","密码在6-16位之间,敏感字符屏蔽","","email是联系重要手段","看不清楚?请点击验证码刷新"]
for(var i=0;i<$("span").length;i++){
$("span")[i].innerHTML=info[i];
flag[i]=0;
}
for(var i=0;i<$("input").length-3;i++){
$("input")[i].value="";
}
check_data();
}
//----------邮箱检测
function check_email(email){
var reEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var b_email=reEmail.test(email);
if(b_email){
$("span")[3].innerHTML="<img src='yesok.gif'/> 邮箱可用";
flag[1]=1;
check_data();
}
else{
$("span")[3].innerHTML="<img src='yesno.gif'/> 邮箱错误";
flag[1]=0;
check_data();
}
}
//----------密码检测
function check_password(obj){
var pwd=$("input")[1].value;
var reChinese=/[\u0391-\uFFE5]+/;
var b_chinese=reChinese.test(pwd);
var reSpace=/\s+/;
var b_space=reSpace.test(pwd);
//-------长度测试
if(pwd.length<6){
$("span")[1].innerHTML="<img src='yesno.gif'/> 密码长度不能小于6";
flag[2]=0;
check_data();
}
//-------合法性检测:不能包含汉字
else if(b_chinese){
$("span")[1].innerHTML="<img src='yesno.gif'/> 密码不能包含中文";
flag[2]=0;
check_data();
}
//-------合法性检测:不能包含空格
else if(b_space){
$("span")[1].innerHTML="<img src='yesno.gif'/> 密码不能包含空格";
flag[2]=0;
check_data();
}
//-------合法时显示密码强度
else{
//定义对应的消息提示
var num=getResult(pwd);
var msg=new Array("<img src='bad.gif'/> 密码强度差","<img src='comm.gif'/> 密码强度一般","<img src='good.gif'/> 密码强度强壮");
$("span")[1].innerHTML=msg[num];
if($("input")[2].value!=""){
check_pw();
}
return flag[2]=1;
check_data();
}
}
//定义检测函数,返回0/1/2分别代表差/一般/强
function getResult(s){
var ls =-1;
if (s.match(/[a-z]/ig)){
ls++;
}
if (s.match(/[0-9]/ig)){
ls++;
}
if (s.match(/(.[^a-z0-9])/ig)){
ls++;
}
return ls;
}
//---------密码一致性检测
function check_pw(){
var pwd=$("input")[1].value.toString();
var check_pwd=$("input")[2].value.toString();
if(flag[2]==1){
if(pwd==check_pwd){
$("span")[2].innerHTML="<img src='yesok.gif'/> 密码可以使用";
flag[3]=1;
check_data();
}
else{
$("span")[2].innerHTML="<img src='yesno.gif'/> 两次密码不相同";
flag[3]=0;
check_data();
}
}
}
//---------用户名合法性检测
function check_id(id_name,tname,fname){//只能字母和数字,是否相同用AJAX判断
var reId=/^[\w\u0391-\uFFE5]+$/;
var b_id=reId.test(id_name); //test 内置函数
if(!b_id){
$(elementsId).innerHTML=" <img src='yesno.gif'/>用户名或名称非法，应该为字母数字汉字等";
flag[4]=0;
check_data();
}
else{//合法用户名用ajax的checkid()检测是否被注册过
$(elementsId).innerHTML="字符正确"
checkid(id_name,tname,fname);
}
}
//---------检查数据,使提交按钮是否生效
function check_data(){
//if(flag[0]==1 && flag[1]==1 && flag[2]==1 && flag[3]==1 && flag[4]==1 && flag[5]==1){
if(flag[4]==1 ){
//$("addwxrb").disabled=false;
return true;
}
else{
//alert('请换一个名字')
//$("addwxrb").disabled=true;
return false;
}
}
//--------------------------------------------------------------------
5、html表单调用页面：
<div id="right" class="col-sm-9 col-md-6 col-lg-8">
<div id="right_form">
<div id="right_title" class="label label-primary">维修人</div>
<div id="right_comment_bg">
<div id="right_comment" style="line-height:22px; font-size:14px;">
<br />
<form name="myform" action="?action=savewxr&id=<%=id%>" method="post" onsubmit="return check_data()">
<!---->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-striped table-bordered" align="left">
<tr class="table">
<td>
<div class="input-group">
<label for="wxr" class="input-group-addon">维修人：</label>
<input name="wxr" class="col-sm-3" type="text" id="editwxr" value="<%=rs("wxr")%>" onblur="getid1(this.getAttribute('id'));"/> <span id="editwxrspan"><font size="2" color="red"> 支持汉字,单词,数字,敏感字符屏蔽</font></span>
<input type="submit" class="col-sm-1" name="button" id="button" value="修改" />
<input type="button" class="col-sm-1" name="button2" id="button2" value="返回" onClick="javascript:window.history.back();return false;" />
</div>
</td>
</tr>
</table>
</form>
<br /> <br />
</div>
</div>
</div>
</div>
6、asp调用ueditor
<%=rs(“shuoming”)%>为数据库中读取数据显示到ueditor的代码,重点是name=“art_content”
<tr><td>
<script id="myUeditor" name="art_content" type="text/plain" align="center" style="width:auto;height:auto;"> <%=rs("shuoming")%></script>
<script type="text/javascript"> var editor_a = UE.getEditor('myUeditor');</script>
</td></tr>
<tr><td>
下面为asp存入数据库的代码,重点是Request.Form(“art_content”)
<%
End Sub
Sub saveshuoming()
sContent = ""
For i = 1 To Request.Form("art_content").Count
sContent = sContent & Request.Form("art_content")(i)
Next
Set rs=server.CreateObject("adodb.recordset")
sql="select * from bx_shuoming where id=1"
rs.open sql,conn,1,3
rs("shuoming")=sContent
rs.update
rs.close
set rs=nothing
call errmsg("设置说明成功","?action=shuoming")
End Sub
%>
7、bootstrap 导航条，兼容ie8
小于ie9，必须用js2.0以下，必须在原的js2.0之下 注意引入的顺序不能错，否则不能正常工作；
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="zhy" />
<!-- #include file="Config.Asp" -->
<!-- #include file="Conn.Asp" -->
<!-- #include file="inc/md5.Asp" -->
<title><%=SiteName%></title>
<script src="js/script.js" type="text/javascript" ></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery.min-2.1.1.js"></script>
<!--[if lt IE 9]>
<script src="js/jquery-1.12.1.min.js">
</script><![endif]-->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="Css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="Css/bootstrap/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="Css/bootstrap/js/ie8-responsive-file-warning.js"></script>
<script src="Css/bootstrap/js/respond.min.js"></script>
<script src="Css/bootstrap/js/html5shiv.js"></script>
<![endif]-->
<script src="js/detect.js" type="text/javascript"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<!--ueditor-->
<script type="text/javascript" charset="gbk" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="gbk" src="ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="gbk" src="ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
8.导航条自适应，图片背景，
<div id="all" class="row clearfix " align="center">
<div id="all" class="row " style="position:relative; width:1198px;">
<img class="img-responsive center-block" src="images/logo.png" style="width:100%;"/>
<h2 class="page-header" style="position:absolute;top:-20px;left:250px;color:blue">红旗小学设备报修系统</h2>
</div>
<div id="banner" class="row " >
<nav class="navbar navbar-inverse " role="navigation" >
<div class="container-fluid">
<button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="menu" class="collapse navbar-collapse">
<%
if session("bx_admin")<>"" then
%>
<ul class="nav navbar-nav" style="display: inline-block;float: none;">
<li><a href="?action=shuoming" target="_self">相关说明</font></a></li>
<li class="active"><a href="?action=add">报修登记</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">受理情况<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="?action=admin">全部报告</a></li>
<li><a href="?action=admin&jindu=1">未受理</a></li>
<li><a href="?action=admin&jindu=2">处理中</a></li>
<li><a href="?action=admin&jindu=3">已完成</a></li>
</ul>
</li>
<li><a href="?action=adminshebei">设备管理</a></li>
<li><a href="?action=wxr">维修人管理</a></li>
<li class="dropdown"><a href="?action=list" class="dropdown-toggle" data-toggle="dropdown">系统管理<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="?action=adminpass">更改密码</a></li>
<li><a href="?action=excel">导出Excel</a></li>
<li><a href="?action=loginout">退出管理</a></li>
</ul>
</ul>
<%else%>
<ul class="nav navbar-nav" style="display: inline-block;float: none;">
<li><a href="?action=shuoming" target="_self">相关说明</font></a></li>
<li class="active" ><a href="?action=add">报修登记</a></li>
<li lass="dropdown"><a href="?action=list" class="dropdown-toggle" data-toggle="dropdown">受理情况<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="?action=list">全部报告</a></li>
<li><a href="?action=search&jindu=1">未受理</a></li>
<li><a href="?action=search&jindu=2">处理中</a></li>
<li><a href="?action=search&jindu=3">已完成</a></li>
</ul>
</li>
<li><a href="?action=login">系统管理</a></li>
</ul>
<%end if%>
</div>
</div>
</nav>
</div>
</div>
9.asp Excel.Application组件组件导出 excel
不能创建对象 Set Fs=Server.CreateObject(“Scripting.FileSystemObject8”)----这个8就是，你可以慢慢的测试了
应该是FSO给关闭了，但运行 regsvr32 scrrun.dll 然后重启一下 IIS 的服务
Excel.Application组件
10.操作数据库
1）增加数据
sub saveaddwxr()
call chkadmin()
wxr1=request.Form(“wxr”)
if wxr1="" then
call errmsg(“名称不能空！”,"?action=addwxr")
else
set rs=server.CreateObject(“adodb.recordset”)
sql=“select * from bx_wxr”
rs.open sql,conn,1,3
rs.addnew
rs(“wxr”)=wxr1
rs.update
rs.close
set rs=nothing
call errmsg(“添加成功！”,"?action=wxr")
end if
End sub
2）更改单条信息
sub savewxr()
call chkadmin()
id=cint(request.QueryString(“id”))
wxr1=trim(request.Form(“wxr”))
if wxr1="" then
call errmsg(“名称不能空!”,"?action=editwxr&id="&id)
else
conn.execute(“update bx_wxr set wxr=’”&wxr1&"’ where id="&id)
call errmsg(“更新成功!”,"?action=wxr")
end if
end sub
类似资料：