动态网页大作业 - 简单易懂【附源码分享】- 基于ASP、Ajax技术
这是突击一个星期的菜鸡作业，提供给大家进行分享学习，是基于ASP、VBScript的旅客主题动态网站，有登录注册、在线留言功能，连接了本地数据库，需要配置好IIS环境，然后把文件夹放到IIS文件夹中，浏览器输入http://localhost/文件名.asp，即可打开。网盘链接：https://pan.baidu.com/s/19f5T6h-7thy_3dbiOKyhCg提取码：ffbv基于Aja
这是突击一个星期的菜鸡作业，提供给大家进行分享学习，是基于ASP、VBScript的旅客主题动态网站，有登录注册、在线留言功能，连接了本地数据库，需要配置好IIS环境，然后把文件夹放到IIS文件夹中，浏览器输入http://localhost/文件名.asp，即可打开。
网盘链接：https://pan.baidu.com/s/19f5T6h-7thy_3dbiOKyhCg
提取码：ffbv
基于Ajax技术的旅客主题网页开发
摘要：本报告主要围绕《Traveller旅客网站》作品进行阐述，内容分为作品介绍、作品设计与开发，作品效果展示以及工作分析与总结四部分。
关键词：Ajax技术 ASP程序 jQuery框架 Access数据库 VBScript
《Traveller旅客网站》，一个为旅客提供景点推荐和交流分享平台的旅游网站，在灵活结合与运用自己已有的HTML开发知识，以及在动态网页课程上所学到的新知识后，所开发出来的一个较为完整的网站。
此网站分为五个页面：
1、登录页面
用户可进行登录操作，登录成功后，即可进入网站首页。
2、注册页面
用户可进行注册操作，注册成功后，即可凭新账号及密码登录网站。
3、修改密码页面
用户可进行修改密码操作，修改成功后，即可凭原账号及新密码登录网站。
4、首页页面
此页面为用户提供景点的推荐和介绍。点击景点后，用户可以查看最新各个景点的介绍，如果是管理员可以进行景点的后台信息更新。
景点介绍：
5、留言页面
此页面是旅客之间交流分享的页面，用户可在此处查看其他旅客的留言记录，用户与用户之间的交流更加便利。
留言板：
1、界面设计
网站配色主题是简约和大气的风格，字体设为灰色或黑色，主要展示景点的信息，提升视觉上的满足感，使网站更加符合旅游主题。
网页的内容均为白底矩形，排版是比较简约现代的形式，条理清晰地向用户展示各项内容。
2、结构设计
3、功能设计
此网站功能包括：注册帐号、修改密码、登录帐号、景点推荐、交流分享、联系我们等。在用户的各项操作中，均存在一定的交互性，如注册时帐号密码填写格式不正确，该网页会返回错误提示，提醒用户重新填写。
4、核心开发
- 注册功能（登录和修改密码的代码都类似）
<% '-----------------------连接数据库---------------------------------
Dim conn
Set conn=Server.CreateObject("ADODB.Connection")
dp = "data\yh.mdb" '相对本文件的数据库位置
conn.open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(""&dp&"")
<!-- '-----------------------创建记录集--------------------------------- -->
<!-- Set rs = conn.Execute("Select * From yh Order By ID DESC") -->
%>此功能依赖于一个register.asp（需要引入上面的头文件）。
<!--#include file="conn.asp" -->
在register.asp中，用户在表单中填写基本信息，用户填写完后，用Ajax技术提交表单内容，通过asp程序将注册信息插入到数据库的yhmm表。
填写表单代码（当然可以自行更改样式）：
<form method="post" action="?state=reg" class="a">
<table align="center" >
<tr>
<td colspan="2">
<h1 align="center" style="color:rgb(1, 178, 223)">用户注册</h1>
</td>
</tr>
<tr>
<td>账号/用户名</td>
<td><input type="text" name="username" autocomplete="off" id="input" placeholder="4-16个字符"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="input" placeholder="6-16位字母或数字组合"></td>
</tr>
<tr>
<td>再次输入密码</td>
<td><input type="password" name="password_again" id="input" placeholder="再次输入密码"></td>
</tr>
<!-- <tr>
<td>性别</td>
<td>
<select name="sex" id="selectlist">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td>身份</td>
<td>
<select name="sex" id="selectlist">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr> -->
<tr>
<td>手机号码</td>
<td><input type="text" name="phone" id="input" placeholder="手机号码"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name="mail" id="input" autocomplete="off" placeholder="邮箱"></td>
</tr>
<tr>
<td></td>
<td id="small" ><u><a href="login.asp">已有账号?</a></u></td>
</tr>
<tr>
<td colspan="2">
<div align="center" style="margin: 5px;">
<input name="button" id="button" type="submit" value="注册">
</div>
</td>
</tr>
</table>
</form>实现注册：
<!---------------------------------- 注册功能 ----------------------------->
<%
if Request.QueryString("state")="reg" then 'if Request.ServerVariables("REQUEST_METHOD")="POST" then
if request.Form("username")="" or request.Form("password")="" or request.Form("phone")="" or request.Form("mail")="" or request.Form("password_again")="" then
response.Write("<script>alert('都是必填项！!');history.go(-1);</script>") '判断用户名、密码、手机号、邮箱是否为空，任意一项为空则不通过
<!-- response.Redirect "register.asp" -->
else
if len(request.Form("username")) < 4 then
'判断用户名是否小于四位数，如果小于四位数就不能通过
response.Write("<script>alert(' 用户名不能小于四个字');history.go(-1);</script>")
else
if len(request.Form("password")) < 5 or len(request.Form("password"))> 16 then
response.Write("<script>alert('密码不能小于5位，不能大于16位'); history.go(-1);</script>")
else
if request.Form("password") <> request.Form("password_again") then
'两次输入的密码不同
response.Write("<script>alert('两次输入的密码不同!'); history.go(-1);</script>")
else
set rs = server.CreateObject("adodb.recordset")
rs.open "select * from [yhmm]",conn,1,3
rs.addnew
rs("username")=request.Form("username") 'rs("字段")=值
rs("password")=request.Form("password")
rs("phone")=request.Form("phone")
rs("mail")=request.Form("mail")
rs.update
response.write "<script>alert('注册成功！！！'); location.href = 'login.asp'</script>"
'提示注册成功
' response.end
end if
end if
end if
end if
end if
%>- 修改密码功能（类似注册）
此功能依赖于一个modify.asp。
与注册功能类似，用户在该页面的表单中填写信息，先验证填写格式是否正确，再将表单内容传递至自身处理，先根据用户填写的信息在数据库yhmm表中查找，如有记录集，则表示用户填写的信息均正确，允许修改，修改完成再跳转至Login.asp登录页面。修改失败将返回错误提示。
代码：
<!------------------------- 修改密码 ---------------------------->
<% if request.QueryString("state")="mdy" then '判断是否是登录状态
response.write("modifying...")
us = trim(request.Form("username"))
ph = trim(request.Form("phone"))
em = trim(request.Form("email"))
pw = trim(request.Form("password"))
pwa = trim(request.Form("password_again"))
if us = "" or ph = "" or em = "" then
response.Write("<script>alert('都是必填项!');history.go(-1);</script>") '提示返回
else
'查询是否在数据库里
set rs = server.CreateObject("adodb.recordset")
sql = "select * from [yhmm] where username='"&us&"'"
rs.open sql,conn,1,1 '1,1是只读数据，1,3是插入数据，2,3是修改数据
if not rs.eof then '非空，就是有该数据
if rs("phone") = ph then '密码也正确
session("username") = rs("username")
'一类用来在客户端和服务器之间保持状态的解决方案 ④。有时候session也用来指这种解决方案的存储结构，如“把xxx保存在session里”
session("phone")=rs("phone")
session("mail")=rs("mail")
session("ident")=rs("ident")
'response.write "<script>alert('手机正确！！！'); parent.window.history.go(-1);</script>"
if rs("mail") = em then '邮箱正确
'response.write "<script>alert('邮箱正确！！！'); parent.window.history.go(-1);</script>"
if rs("password") = pw then '密码相同
response.write "<script>alert('密码不能和原密码相同！！！'); parent.window.history.go(-1);</script>"
else
if len(request.Form("password")) < 5 or len(request.Form("password"))> 16 then
response.write "<script>alert('密码不能小于5位，不能大于16位'); parent.window.history.go(-1);</script>"
else
if pw = pwa then
set rs = server.CreateObject("adodb.recordset")
rs.open "select * from [yhmm] where username='"&us&"'",conn,1,3
rs("password")=request.Form("password")
rs.update
response.write "<script>alert('密码修改成功!!'); location.href = 'login.asp';</script>"
end if
end if
end if
else
response.write "<script>alert('邮箱不正确！！！'); parent.window.history.go(-1);</script>"
end if
else
response.write "<script>alert('密码错误！！！'); parent.window.history.go(-1);</script>"
end if '结束判断
else
response.Write("<script>alert('用户不存在！！！'); parent.window.history.go(-1);</script>")
end if
end if
end if
%>- 登录功能
此功能依赖于一个login.asp。
同理，与注册和修改密码功能类似，用户在login.asp的表单中填写信息，先验证填写格式是否正确，再将表单内容传递至自身处理，根据用户填写的信息在数据库yhmm表中查找，如有记录集，则表示用户帐号及密码填写正确，asp创建session对象记录帐号信息，再跳转至index.asp登录页面。登录失败将返回错误提示。
代码：
<!----------------------------- 登录 ------------------------------->
<% if request.QueryString("state")="login" then '判断是否是登录状态
response.write("login...")
us = trim(request.Form("username"))
pw = trim(request.Form("password"))
if us = "" or pw = "" then
response.Write("<script>alert('用户名和密码不能为空!');history.go(-1);</script>") '提示返回
else
'查询是否在数据库里
set rs = server.CreateObject("adodb.recordset")
sql = "select * from [yhmm] where username='"&us&"'"
rs.open sql,conn,1,1 '1,1是只读数据，1,3是插入数据，2,3是修改数据
if not rs.eof then '非空，就是有该数据
if rs("password") = pw then '密码也正确
session("username") = rs("username")
'一类用来在客户端和服务器之间保持状态的解决方案 ④。有时候session也用来指这种解决方案的存储结构，如“把xxx保存在session里”
session("phone")=rs("phone")'这里的session可以在登录后的首页读取
session("mail")=rs("mail")
session("ident")=rs("ident")
response.write "<script>alert('登录成功！！！'); location.href = 'index.asp?in=1'</script>"
else
response.write "<script>alert('密码错误！！！'); parent.window.history.go(-1);</script>"
end if '结束判断
else
response.Write("<script>alert('用户不存在！！！'); parent.window.history.go(-1);</script>")
end if
end if
end if
%>- 景点信息的动态更新
由于景点新的更新需要读取数据库中的图片和其他信息，没有基本信息则无法呈现景点信息。在用户主界面选择景点后，将该景点对应的序号作为参数传递到景点呈现界面，然后在index_intro.asp中获取该参数，并以此查找景点对应的记录集，将其中的文字图片等信息进行读取和显示。管理员可以在后台进行内容更新。
主要难的是读取图片，这里我用access的text来存储图片路径，然后在asp中读取
在用户选择景点后跳转传递参数到这个asp中：
<a href="index_intro.asp?sid=1"></a>
然后这里获取sid的值 ： request("sid")
<!------------------------- 景点介绍 ----------------------------------->
<%
if IsEmpty(request("sid")) then
response.write "传递参数为空!"
end if
set rs=server.CreateObject("adodb.recordset") '创建记录对象
Sql="select * from spots where sid="&request("sid")&"" 'Sql
rs.open Sql,conn,1,1
if not (rs.eof and rs.bof) then
' response.Write "找到景点sid="&request("sid")&"data"
Name_cn = rs("name_cn")
Name_en = rs("name_en")
spot_content = rs("content")
pic1_src = rs("img1")
pic2_src = rs("img2")
pic3_src = rs("img3")
'response.write "超链接1为______"&rs("img3")&"_______XXX"
end if
%>
<div>
<div class="bg_2">
<div class="title_cn"><% =Name_cn%></div>
<div class="title_en"><% =Name_en%></div>
<div style="text-align: center;font-size: smaller;">[内容可在后台管理]</div>
</div>
<div class="content">
<% =spot_content %>
</div>
<div>
<img style="margin-bottom: 30px;" width="900px" height="800px" src="<%=rs("img1")%>" ></div>
<img style="margin-bottom: 30px;" width="900px" height="800px" src="<%=rs("img2")%>" ></div>
<img style="margin-bottom: 30px;" width="900px" height="800px" src="<%=rs("img3")%>" ></div>
</div>
</table>留言板信息的无刷新显示
留言区的更新需要及时读取数据库中的留言记录和其他信息，没有基本信息则无法进行留言功能。所以留言区要在每次成功提交留言后进行更新回到当前页面，此处的数据加载形式与景点展示区类似，使用Ajax将客户端请求发送到lyb.asp，在lyb.asp中进行表格数据的更新处理。
另外，利用VBscript和Ajax，对记录集进行操作，一个页面只展现优先的留言数，并且实现了翻页的功能，使得可浏览的信息空间更大。
留言板信息的提交
此处的留言数据加载形式与注册版块类似，将评论内容转化为记录集合形式传递至lyb.asp，并将内容插入数据库，同时对页面进行无刷新更新。
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
12
0- 0
已为社区贡献1条内容
所有评论(0)