当前页:网页制作 >>>ASP入门教程
ASP入门教程
责任编辑:黄舒奇  发表时间:2007-08-20  最后修改时间2016-05-25
第一课 安装IIS
    首先,要在电脑上安装IIS:关于安装和调试IIS本站有很多这方面的文章,会安装了这步省略,不会的话请看"网上安家"和"Win 2003动态网站IIS(图)"安装成功后,到C:\Inetpub\wwwroot 用记事本编写文件test.asp
内容为 <%=time()%> 然后,打开IE,在地址栏输入http://127.0.0.1 /test.asp 如果看到时间就说明已经安装成功了!恭喜调试环境已经准备OK
这次学习需要安装2个软件
Macromedia DreamweaverMicrosoft Access
我们已经安装了ASP的调试环境,那么我们就要学习如何制作提交页和接收页了。下面要用到Macromedia Dreamweaver
第二课 提交表单example.htm的制作
  
     在开始ASP之前,我们必须懂得用Dreamweaver的表单排出类似这样的效果. 如图:
       
  --------------------------用Dreamweaver制作----------------------------------
1.新建一个HTML空白页,然后插入->表单->表单,就会出现一个虚线框,将其动作输入为list.asp
2.接着插入->表单->文本域,标签为姓名
3.插入->表单->文本域,标签为地址
4.分别将两个文本域的name值改为name和addr
5.插入->表单->按钮
6.表单完成
制作这样的表单是为了提交数据。example.htm文件的<body></body>内的代码如下:
--------------------------------------------------------------------
<form id="form1" name="form1" method="post" action="list.asp">
<label>姓名:
<input name="name" type="text" id="name" />
地址:
<input name="addr" type="text" id="addr" />
<input type="submit" name="Submit" value="提交" />
</label>
</form>
--------------------------------------------------------------------

接着我们来分析一下以上的代码:
<form id="form1" name="form1" method="post" action="list.asp">
这段代码表示将表单的数据提交到 list.asp 这个页面进行处理.
----------------------------------------------------------------
<input name="name" type="text" id="name" /> 表示将姓名的数据通过name这个值来提交
这段是文本区域代码, name="这里是值" ,list.asp会通过name=输入的数据,来取得数据。
                                          
 第三课 - list.asp文件原理
    上面我们已经制作了一个提交数据的页面example.htm,那么我们现在就要制作一个接收数据并显示数据的页面list.asp。
首页,我们要在list.asp页头放以下代码
<%
name=request.form("name")
addr=request.form("addr")
%>
//将表单传送过来的内容赋给name
//将表单传送过来的内容赋给addr(注意上一步表单的命名)
接着我们要<%=name%>来显示内容
<%=name%>表示将name的值显示在本页
<%=addr%>跟上面同理
----------------------list.asp的完整代码如下-----------------------

<%
name=request.form("name")
addr=request.form("addr")
%>
你填写的信息为:<br />
姓名:<%=name%><br>
地址:<%=addr%>  
提交成功后,显示。如图:
               
     我们先在实践一下上面的结果,先打开example.htm,然后提交一个数据看看。
上面已经教会你如果提交和显示数据,下面就要来学会如何用数据库保存数据!也就要用到Microsoft Access
第四课 - 数据库的制作
     上面我们我们已经通过页面把数据接收到了,但是细心的你会发现,这个数据是只暂时的,一关闭浏览器就没有了。如何能够保存数据,好在下一次能够继续用到呢?那么我们就要用到access数据库拉。
我们打开Microsoft Access新建一个空白数据库并保存为db1.mdb
然后点击“使用设计器创建表” 如图:
                 
  由于之前我们的数据只有“姓名”和“地址
      那么我们就建立三个栏 id , name , addr (id是为了给这些数据自动编好的,方便以后删除和修改)如图:
                     
然后将保存为表:info (将id设置为主键)
到此为止数据库就建立好拉。
第五课- 重新设计数据的接收页 add.asp
学习到这里了 list.asp 这个文件就正式取消了。
因为之前我们已经有了提交数据的页面 example.htm 如图:
     
现在,我们就要将example.htm页的数据提交到add.asp,也就是要将里面的list.asp改为add.asp拉
那么现在就要建立真正的数据接收页 add.asp
add.asp源代码如下:
------------------------------完整代码-------------------------------------
<%
set conn=server.createobject("adodb.connection")
conn.open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("db1.mdb")

name=request.form("name")
addr=request.form("addr")

exec="insert into info(name,addr)values('"+name+"','"+addr+"')"
conn.execute exec

conn.close
set conn=nothing
%>

<%="记录添加成功!"%>

-------------------------------数据库连接代码分析--------------------------
set conn=server.createobject("adodb.connection")
conn.open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("db1.mdb")
这两句是永远只要抄过去就好,用来告诉电脑数据库在那里。
-------------------------------变量分析------------------------------------
name=request.form("name")
addr=request.form("addr")
将表单提交过来的内容赋给变量,注意上一步表单的命名不要写错。
--------------------------------将内容插入到info表-------------------------
exec="insert into info(name,addr)values('"+name+"','"+addr+"')"
conn.execute exec
执行insert插入内容到数据库
-------------------------------关闭数据库----------------------------------
conn.close
set conn=nothing
别忘记关闭数据库
解释更清楚一些:
    1. insert into后面加的是表的名字,后面的括号里面是需要添加的字段,不用添加的或者字段的内容可以省略。注意,这里变量一定要和ACCESS里面的字段名对应,否则就会出错!
    2. exec是一个字符串,"insert into info(name,addr)values('"是第一段,在ASP里面不能嵌双引号,所以可以用'代替双引号,放在双引号里面,连接两个变量用+或者&所以"',"又是一段,中间夹了一个name就是表单传来的变量,这样就可以在这个变量外面加两个'',表示是字符串了。注意,如果是数字型变量所以不需要外面包围的单引号!
第六课-从数据库中读取信息
   有时间就多执行example.htm多添加几条信息进去吧!这样要显示数据时会比较好看哦!
那么下一步,就要开始制作显示数据的页面
步骤一:排版出这样的效果相信不会太为难你吧。如图:
             
页面我们已经制作好了,但是如果才能够让这个页面来显示数据库的数据呢
接下载就要在这个页面内添加代码了。
步骤二:在<table...的上一行,写上

<%
set conn=server.createobject("adodb.connection")
conn.open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("db1.mdb")

exec="select * from info"
set rs=server.createobject("adodb.recordset")
rs.open exec,conn,1,1
%>

说明一下:
   1.前两行刚才用过了,从add.asp复制过来就可以了!
   2.第3行,设置查询数据库的命令,select后是查询的字段,如果全部用*,from数据库中的表名
   3.第4行,定义一个记录集组件,用来放查询的信息
   4.第5行,是打开这个记录集,exec是前面定义的查询命令,conn是前面定义的数据库连接组件,后面参数“1,1”,表示读取 [注:以后用修改记录就把参数设置为1,3]
步骤三:设置数据显示的开头

</tr>和<tr>的中间写上
<%do while not rs.eof%>
在</table>上一行,写上
<%
rs.movenext
loop
%>
------------------------------------------------------
在表格第二行的单元格内分别写上要显示的信息[这些操作都在代码状态下输入,不要写错了哦]
<%=rs("id")%> ------编号
<%=rs("name")%>
-------姓名
<%=rs("addr")%> ------地址
-------------------------------------------------------
大功告成!
当然,最好养成好习惯!在最后写上代码:
<%
rs.close
set rs=nothing
conn.close
set conn=nothing
%>
就是关闭rs和conn了!
下面,我们访问一下
lang.asp
,正确的将数据库信息显示出来了。如图:
             
根据上面说明制作出来的lang.asp代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>数据显示页</title>
<style type="text/css">
<!--
.STYLE1 {color: #FFFFFF}
-->
</style>
</head>

<body>
<%
set conn=server.CreateObject("adodb.connection")
DBPath = Server.MapPath("db1.mdb")
conn.open "provider=microsoft.jet.oledb.4.0; data source="&DBpath

exec="select * from info"
set rs=server.createobject("adodb.recordset")
rs.open exec,conn,1,1
%>

<table width="320" border="0" cellpadding="5" cellspacing="1" bgcolor="#D6E0EF">
<tr>
<td bgcolor="#698CC3"><div align="center"><span class="STYLE1">编号</span></div></td>
<td bgcolor="#698CC3"><div align="center"><span class="STYLE1">姓名</span></div></td>
<td bgcolor="#698CC3"><div align="center"><span class="STYLE1">地址</span></div></td>
</tr>
<%do while not rs.eof%>
<tr>
<td width="46" bgcolor="#FFFFFF"><%=rs("id")%></td>
<td width="123" bgcolor="#FFFFFF"><%=rs("name")%></td>
<td width="117" bgcolor="#FFFFFF"><%=rs("addr")%></td>
</tr>
<%
rs.movenext
loop
%>

</table>
</body>
</html>
<%
rs.close
set rs=nothing
conn.close
set conn=nothing
%>

第七课-掌握分页技术
数据,已经通过lang.asp显示出来了,但是你会发现一个问题,一旦数据多起来的时候,就会一直排列下去。如果数据达到几万条的话,那不是把页面都撑暴了。既然是这样,那么我们利用分页技术把这个问题解决。 
   分页技术,是ASP程序的难点,比较不好理解,实现的方法也多种多样!所以,很多人研究了好几天,也不理解!
这里用一种简单实用的方法:就直接修改上面的显示页面的asp文件吧!通过三个步骤完成吧
步骤一
修改<%do while not rs.eof%>为下面代码,rs.PageSize表示每页显示多少条信息,请自行修改!
<%
rs.PageSize=3
pagecount=rs.PageCount
page=int(request.QueryString ("page"))
if page<=0 then page=1
if request.QueryString("page")="" then
page=1
end if
rs.AbsolutePage=page
for i=1 to rs.PageSize
if rs.EOF then
  exit for
end if
%>
步骤二
<%
rs.movenext
loop
%>

修改为
<%
rs.movenext
next
%>
步骤三:复制下面代码到要显示“上页、下页”的地方,为美观,将表格宽度width="320",改为跟你页面表格一致!

<table width="320" border="0" cellpadding="5" >
<tr>
<td align="right">
<%if page=1 and not page=pagecount then%>
第<%=page%>页
<%for i=1 to pagecount%>
<a href="?page=<%=i%>"><%=i%></a>
<%next%>
<a href="?page=<%=page+1%>">下页</a>
<%elseif page=pagecount and not page=1 then%>
第<%=page%>页
<%for i=1 to pagecount%>
<a href="?page=<%=i%>"><%=i%></a>
<%next%>
<a href="?page=<%=page-1%>">上页</a>
<%elseif page<1 then%>没有任何记录!
<%elseif page>pagecount then%>没有任何记录!
<%elseif page=1 and page=pagecount then%>
<%else%>
第<%=page%>页
<%for i=1 to pagecount%>
<a href="?page=<%=i%>"><%=i%></a>
<%next%>                 
<a href="?page=<%=page-1%>">上页</a>
<a href="?page=<%=page+1%>">下页</a> </div>
<%end if%>
</td></tr></table>
完成,我们来看看显示结果。如图:
             
根据上面说明修改出来的lang.asp代码如下(带分页功能):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>数据显示页</title>
<style type="text/css">
<!--
.STYLE1 {color: #FFFFFF}
-->
</style>
</head>

<body>
<%
set conn=server.CreateObject("adodb.connection")
DBPath = Server.MapPath("db1.mdb")
conn.open "provider=microsoft.jet.oledb.4.0; data source="&DBpath

exec="select * from info"
set rs=server.createobject("adodb.recordset")
rs.open exec,conn,1,1
%>
<table width="320" border="0" cellpadding="5" cellspacing="1" bgcolor="#D6E0EF">
<tr>
<td bgcolor="#698CC3"><div align="center"><span class="STYLE1">编号</span></div></td>
<td bgcolor="#698CC3"><div align="center"><span class="STYLE1">姓名</span></div></td>
<td bgcolor="#698CC3"><div align="center"><span class="STYLE1">地址</span></div></td>
</tr>
<%
rs.PageSize=3
pagecount=rs.PageCount
page=int(request.QueryString ("page"))
if page<=0 then page=1
if request.QueryString("page")="" then
page=1
end if
rs.AbsolutePage=page
for i=1 to rs.PageSize
if rs.EOF then
exit for
end if
%>
<tr>
<td width="46" bgcolor="#FFFFFF"><%=rs("id")%></td>
<td width="123" bgcolor="#FFFFFF"><%=rs("name")%></td>
<td width="117" bgcolor="#FFFFFF"><%=rs("addr")%></td>
</tr>
<%
rs.movenext
next
%>
</table>
<table width="320" border="0" cellpadding="5" >
<tr>
<td align="right">
<%if page=1 and not page=pagecount then%>
第<%=page%>页
<%for i=1 to pagecount%>
<a href="?page=<%=i%>"><%=i%></a>
<%next%>
<a href="?page=<%=page+1%>">下页</a>
<%elseif page=pagecount and not page=1 then%>
第<%=page%>页
<%for i=1 to pagecount%>
<a href="?page=<%=i%>"><%=i%></a>
<%next%>
<a href="?page=<%=page-1%>">上页</a>
<%elseif page<1 then%>没有任何记录!
<%elseif page>pagecount then%>没有任何记录!
<%elseif page=1 and page=pagecount then%>
<%else%>
第<%=page%>页
<%for i=1 to pagecount%>
<a href="?page=<%=i%>"><%=i%></a>
<%next%>
<a href="?page=<%=page-1%>">上页</a>
<a href="?page=<%=page+1%>">下页</a> </div>
<%end if%>
</td></tr></table>
</body>
</html>
<%
rs.close
set rs=nothing
conn.close
set conn=nothing
%>
第八课-- 删除数据库信息
   前面,我么已经学会了数据入库、读取和分页技术。那么这一节课,就来学习删除数据库信息。
   为了免得麻烦,我们就直接复制一份lang.asp改名为del.asp。   
   首先在地址后面增加一个栏,如图:
             
接着在后面的空格子内输入以下代码:
<a href='?act=del&id=<%=rs("id")%>' onclick='javascript: return confirm("你确定要删除吗? ");'>删除</a>
输入成功后,如图:
           
接着在exec="select * from info"的上一行输入:
act=request.QueryString("act")
if act="del" then '删除
id=request.QueryString("id")
sql="delete from info where id="&id
conn.execute(sql)
response.Redirect("del.asp")
end if

删除数据的页面也就在原来lang.asp的基础上增加上面两段代码,大家可以好好分析分析。

第九课-修改数据库信息
你提交了一个信息,但是你发现有错?该怎么办?难道删除掉,重新添加?
下面我们学学如何修改数据库资料:
首先我们在DEL.asp建立一个修改链接
         
    “修改”链接到 edit.asp?id=<%=rs("id")%> ,这其中edit.asp是我们后面需要建立的文件。
     接着我们就要建立edit.asp来接受del.asp赋值过来的数据库了。
     我们要制作一个下面效果的页面
           
主要的:
这段代码放在网页代码头部:
<%排版这样的布局相信大家都会了,那么就说一下
set conn=server.CreateObject("adodb.connection")
DBPath = Server.MapPath("db1.mdb")
conn.open "provider=microsoft.jet.oledb.4.0; data source="&DBpath
id=request("id")
set rs=server.CreateObject("adodb.recordset")
sql="select * from info where id="&id
rs.open sql,conn,1,1

%>
前三行代码就不说了
id=request("id") 表示取得赋值过来的ID
set rs=server.CreateObject("adodb.recordset")
sql="select * from info where id="&id
rs.open sql,conn,
1,1
表示查询info表id字段里面的某个ID
接着我们就要在表格对应的里面建立文本域用来显示信息
<body></body>里面代码如下:
<table width="350" border="0" cellpadding="6" cellspacing="1" bgcolor="#D6E0EF">
<tr>
<td colspan="2" bgcolor="#698CC3"><div align="center" class="STYLE9">数据修改</div></td>
</tr>
<form name="form1" action="editok.asp?id=<%=id%>" method="post">
<tr>
<td width="86" bgcolor="#FFFFFF"><div align="center"><span class="STYLE5">姓名</span></div></td>
<td width="237" bgcolor="#FFFFFF"><input name="name" type="text" id="name" value="<%=rs("name")%>" /></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div align="center" class="STYLE5">地址</div></td>
<td width="237" bgcolor="#FFFFFF"><input name="addr" type="text" id="addr" value="<%=rs("addr")%>" /></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF"><div align="center">
<input type="submit" name="Submit" value=" 修改 " />
</div>
</td>
</tr>
</form>
</table>
要注意name值别出错
<%=rs("name")%><%=rs("addr")%> 是用来显示内容的.
<form name="form1" action="editok.asp?id=<%=id%>" method="post"> 表示把内容提交到editok.asp处理,并且注明 id=多少
现在我们就要建立editok.asp文件用来接收修改信息。
editok.asp只是代码,不需要建立表格之类的,代码如下:
<%
set conn=server.CreateObject("adodb.connection")
DBPath = Server.MapPath("db1.mdb")
conn.open "provider=microsoft.jet.oledb.4.0; data source="&DBpath

id=trim(request("id"))
set rs=server.CreateObject("adodb.recordset")
sql="select * from info where id="&id
rs.open sql,conn,1,3
rs("name")=request.form("name")
rs("addr")=request.form("addr")

rs.update
rs.close
set rs=nothing
conn.close
set conn=nothing
%>
<script lanaguage="javascript">{window.alert('修改成功!请返回!');window.location.href='del.asp'}</script>

id=trim(request("id")) 取得要修改信息的ID
sql="select * from info where id="&id 取得与数据库ID的链接
rs("name")=request.form("name")
rs("addr")=request.form("addr")
rs.update
rs.close
表示将数据库现在的内容换成修改的内容
<script lanaguage="javascript">{window.alert('修改成功!请返回!');window.location.href='del.asp'}</script>
给与修改后的提示
到此为止,本教程完全结束。
    看了这个教程,相信初学者能够理解过来。关键是要多做,多熟悉代码。
    因为这个只是教初学者入门,所以有所谓的漏洞是事实,请高手不要太介意。