Web开发课程实验（一）：使用ASP的基本数据交互

实验内容：asp与前端html的基本数据交互。

具体要求：利用windows自带的IIS作服务器，写一个html，再写一个asp，通过两种方式提交数据到asp并展示（html表单submit和ajax提交）。

吐槽一下：笔者基本处于零基础状态，此前只有一点点用nodejs写实验作业的经历，这个东西摸索了半天才做完。在网上搜了不少asp教程看得云里雾里，上来就抛各种名词，看了俩小时没明白最基本的疑问，那就是这个东西整体是长什么样的，在我期望进行的操作中发生了什么事情，笔者认为这是作为小白（暂时的）首先要弄清楚的。当然跟着一个教程慢慢来是肯定会明白的啦，不过最好能让这个“明白”发生在开始的时候。

前置：html, javascript, jQuery。纯前端部分没什么门槛。

0.整体结构

好，先来说一下上面的疑问。

html文件干嘛的？展示出来的实际页面。

asp文件干嘛的？后端脚本，可以生成html。

这个东西它做出来长啥样呢？就俩文件，一个是html，上面是表单，用户可以输入信息然后点上面的提交按钮；一个是asp脚本，它在后端运行，当接收到前端的数据后它就能搓出来（专业一点叫渲染）一个html文件发过去，我们说的所谓asp页面，其实是asp生成的html，这个生成过程是“动态”的，而不是说你在浏览器访问xxx.asp的时候这个页面能实时动态变化，你看到的其实是静态的已经固定的html页面。

咱们在服务器上配置要运行的项目，然后写好的asp相当于一直在后台运行着。
现在用户输入了我们的服务器地址，服务器给他一个默认页面（可以在IIS中设置默认文件），这个就是咱们的register.html。
register.html
用户输入了注册信息，然后点了提交。

在服务器上保持运行的asp脚本接到数据了，asp里面的代码运行一下，搓出来一个html发了过去。于是用户那边看到了反馈回来的由asp生成的html。
register_action.asp

1.html文件

html的部分懒得细说，不明白的直接去w3school的教程看看，熟悉各种元素就手到擒来了。

稍微说一下head里面js的部分：

  • 第7行是引用外部的jQuery.js，不然后面没法用jQuery。
  • check_data是校验合法性用的，校验不通过就return一个false回来
  • sendinf是提交用的函数，跟button的点击事件绑定，先check_data，通过了再提交
  • sendinf_ajax是拿ajax提交，上面的是拿form表单自带的submit方法提交
  • ajax不会主动给你跳转，要手动把后端返回的东西拿过来通过document.write覆写当前页面，也就是success里的部分

直接放代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>注册页</title>
	<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
	<style>
		form {
			margin-left: 10px;
			margin-top: 10px;
		}
	</style>
	<script>
		function check_data() {
			let usn = $("#user").val();
			let pwd = $("#pwd").val();
			if (usn.length>20) {
				alert("用户名长度不得超过20");
				return false;
			}
			if (/\W/.test(pwd)) {
				alert("密码不得包含字母、数字及下划线以外的字符");
				return false;
			}
			if (pwd.length>16) {
				alert("密码长度不得超过16");
				return false;
			}
			if (pwd.length<6) {
				alert("密码长度不得小于6");
				return false;
			}
			return true;
		}
		function sendinf() {
			let check = check_data();
			if (check == false) return;
			$("form").submit();
		}
		function sendinf_ajax() {
			let check = check_data();
			if (check == false) return;
			$.ajax({
				type: "post",
				url: "http://localhost:8888/register_action.asp",
				data: $("form").serialize(),
				success: (res)=>{
					document.write(res);
				}
			});
		}
	</script>
</head>
<body>
	<form action="register_action.asp" method="post" >
		<table border="0">
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="username" id="user" placeholder="长度小于20"></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="password" id="pwd" placeholder="6~16位 字母数字下划线"></td>
			</tr>
			<tr>
				<td>性别：</td>
				<td>
					<input type="radio" name="sex" value="male">男 
					<input type="radio" name="sex" value="female">女
				</td>
			</tr>
			<tr>
				<td>可用语言：</td>
				<td>
					<input type="checkbox" name="lang" value="zh">中文 
					<input type="checkbox" name="lang" value="en">英文 
					<input type="checkbox" name="lang" value="ru">俄语 
					<input type="checkbox" name="lang" value="jp">日语 
					<input type="checkbox" name="lang" value="fr">法语 
					<input type="checkbox" name="lang" value="de">德语
				</td>
			</tr>
			<tr>
				<td>学历：</td>
				<td>
					<select name="edu">
						<option value="小学">小学</option>
						<option value="初中">初中</option>
						<option value="中专/高中">中专/高中</option>
						<option value="专科">专科</option>
						<option value="本科">本科</option>
						<option value="硕士研究生">硕士研究生</option>
						<option value="博士研究生">博士研究生</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>简介：</td>
				<td>
					<textarea name="intro" rows="8" cols="50" id="intro"></textarea>
				</td>
			</tr>
		</table>
		<button type="button" onclick="sendinf()">表单提交</button>
		<br>
		<br>
		<button type="button" onclick="sendinf_ajax()">AJAX提交</button>
	</form>
</body>
</html>

2.asp文件

asp整体写成html的格式，但是其中有一些代码，就是拿<% %>括起来的部分，这些代码运行后生成一个实际返回的html。

Response用来返回html，Request用来接收数据，Request.Form(“xxx”)用来接收表单里名字叫xxx的具体值，不难。

上代码：

<%@ language="javascript" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>注册信息</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css">
		ul {
			margin:20px;
			padding: 20px;
			list-style: disc;
		}
	</style>
</head>
<body>
<%
	Response.Write("<ul>");
	Response.Write("<li>username:"+Request.Form("username")+"</li>");
	Response.Write("<li>password:"+Request.Form("password")+"</li>");
	Response.Write("<li>sex:"+Request.Form("sex")+"</li>");
	Response.Write("<li>lang:"+Request.Form("lang")+"</li>");
	Response.Write("<li>edu:"+Request.Form("edu")+"</li>");
	Response.Write("<li>intro:"+Request.Form("intro")+"</li>");
	Response.Write("</ul>");
%>
</body>
</html>

3.IIS设置

这个教程随手一搜全都是，对着做就行。

其实只要指定物理地址（项目在你磁盘里的位置）和端口号就行了，ip不用管，默认在本机127.0.0.1运行。

然后可以设置一下默认文档，把html加进去就行。

设置完，asp就已经开始运行了。

在浏览器地址栏输入127.0.0.1:端口号（比如8888），或者把127.0.0.1换成localhost，一样的，然后就能看到效果了。

4.结语

结构明白了后面都是很好搞的东西。