动态网页大作业 - 简单易懂【附源码分享】- 基于ASP、Ajax技术

这是突击一个星期的菜鸡作业，提供给大家进行分享学习，是基于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（需要引入上面的头文件）。

在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" thenif request.Form("username")="" or request.Form("password")="" or request.Form("phone")="" or request.Form("mail")="" or request.Form("password_again")="" thenresponse.Write("<script>alert('都是必填项！!');history.go(-1);</script>") '判断用户名、密码、手机号、邮箱是否为空，任意一项为空则不通过<!-- response.Redirect "register.asp"  -->elseif len(request.Form("username")) < 4 then '判断用户名是否小于四位数，如果小于四位数就不能通过response.Write("<script>alert(' 用户名不能小于四个字');history.go(-1);</script>")elseif len(request.Form("password")) < 5 or len(request.Form("password"))> 16 thenresponse.Write("<script>alert('密码不能小于5位，不能大于16位'); history.go(-1);</script>")elseif 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,3rs.addnewrs("username")=request.Form("username") 'rs("字段")=值rs("password")=request.Form("password")rs("phone")=request.Form("phone")rs("mail")=request.Form("mail")rs.updateresponse.write "<script>alert('注册成功！！！'); location.href = 'login.asp'</script>"'提示注册成功'        response.endend ifend ifend ifend ifend 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 = "" thenresponse.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>"elseif len(request.Form("password")) < 5 or len(request.Form("password"))> 16 thenresponse.write "<script>alert('密码不能小于5位，不能大于16位'); parent.window.history.go(-1);</script>"else if pw = pwa thenset rs = server.CreateObject("adodb.recordset")rs.open "select * from [yhmm] where username='"&us&"'",conn,1,3rs("password")=request.Form("password")rs.updateresponse.write "<script>alert('密码修改成功!!');  location.href = 'login.asp';</script>"end ifend ifend ifelse response.write "<script>alert('邮箱不正确！！！'); parent.window.history.go(-1);</script>"end ifelseresponse.write "<script>alert('密码错误！！！'); parent.window.history.go(-1);</script>"end if '结束判断elseresponse.Write("<script>alert('用户不存在！！！'); parent.window.history.go(-1);</script>")end ifend ifend 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 = "" thenresponse.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>"elseresponse.write "<script>alert('密码错误！！！'); parent.window.history.go(-1);</script>"end if '结束判断elseresponse.Write("<script>alert('用户不存在！！！'); parent.window.history.go(-1);</script>")end ifend ifend if%>

景点信息的动态更新

由于景点新的更新需要读取数据库中的图片和其他信息，没有基本信息则无法呈现景点信息。在用户主界面选择景点后，将该景点对应的序号作为参数传递到景点呈现界面，然后在index_intro.asp中获取该参数，并以此查找景点对应的记录集，将其中的文字图片等信息进行读取和显示。管理员可以在后台进行内容更新。

主要难的是读取图片，这里我用access的text来存储图片路径，然后在asp中读取

在用户选择景点后跳转传递参数到这个asp中：

然后这里获取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,1if 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">&nbsp;&nbsp;<% =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，并将内容插入数据库，同时对页面进行无刷新更新。

动态网页大作业 - 简单易懂【附源码分享】- 基于ASP、Ajax技术相关推荐

计算机科学期末网页大作业快看漫画源码（纯享免费版）需要自取免费配置环境
计算机科学期末网页大作业快看漫画源码(纯享免费版)需要自取免费配置环境我的页面我的 </div><div class="flex-grow-1">< ...
纯HTML加CSS实现3D立体动态相册【超简单、附源码】
近日,收到一男粉丝私信,具体如下: PS:在跟他聊天过程中,我不该笑的,哪个男同胞没有这么让人心疼的一刻呢.所以,在此祝愿他能早日哄好他的女朋友,加油,奥利给~~~ 于是,在他的万般焦急等待下,为他量 ...
安卓期末大作业——汉服社区（源码+任务书）
安卓期末大作业--汉服社区(源码+任务书) 课题的作用和意义汉族占中国人口的91%,是中国的主体民族,在越来越全球化的今天,我们正越来越多地,在不同场合,与不同的民族打交道,由此也就越是需要民族身份 ...
Java毕设项目医疗大数据系统计算机（附源码+系统+数据库+LW）
Java毕设项目医疗大数据系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecl ...
电影网站 php asp,moviewebsite 这是一个电影网站的源码，基于asp技术实现.仅供交流学习 WEB(ASP,PHP,...) 238万源代码下载- www.pudn.com...
文件名称: moviewebsite下载收藏√ [ 5 4 3 2 1 ] 开发工具: ASP 文件大小: 7432 KB 上传时间: 2013-07-11 下载次数: 0 提供者: ...
课程项目：大学程序设计相关大作业汇总参考及源码地址
C++程序设计利用C++实现的小游戏:2048,俄罗斯方块和贪吃蛇[Some small games implemented in C++: 2048, Tetris and Snake (Univ ...
静态网页-改图宝（附源码）
静态网页------改图宝(赋源码) 这是人家官网的: 我做的是这样的: 总结二级菜单有些问题,使用百分比后缩小网页时和一级菜单的一个边框对不齐,使用精准的像素后放大网页时对不齐页脚用行块盒真的省 ...
jsp+ssm计算机毕业设计学生互评的在线作业管理系统【附源码】
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
微信小程序「发现流浪猫」宠物互助喂养社区系统部署教程-期末作业项目实例（附源码）
文末附源码免费下载地址一.项目介绍这是一款拍照记录校园内猫猫的成长轨迹的小程序. 可以为不同的猫猫添加身份档案,猫猫相册,并通过精选瀑布流的方式展示给大家. 用户可以上传照片,发表留言,点赞照片或 ...

动态网页大作业 - 简单易懂【附源码分享】- 基于ASP、Ajax技术

动态网页大作业 - 简单易懂【附源码分享】- 基于ASP、Ajax技术相关推荐

最新文章

热门文章