C/S 架构也可以看做是胖客户端架构。因为客户端需要实现绝大多数的业务逻辑和界面展示。这种架构中，作为客户端的部分需要承受很大的压力，因为显示逻辑和事务处理都包含在其中，通过与数据库的交互（通常是SQL或存储过程的实现）来达到持久化数据，以此满足实际项目的需要。C/S 架构的优缺点优点：
1C/S架构的界面和 *** 作可以很丰富。
2安全性能可以很容易保证，实现多层认证也不难。
3由于只有一层交互，因此响应速度较快。缺点：
1适用面窄，通常用于局域网中。
2用户群固定。由于程序需要安装才可使用，因此不适合面向一些不可知的用户。
3维护成本高，发生一次升级，则所有客户端的程序都需要改变。 B/S架构B/S架构的全称为Browser/Server，即浏览器/服务器结构。Browser指的是Web浏览器，极少数事务逻辑在前端实现，但主要事务逻辑在服务器端实现，Browser客户端，WebApp服务器端和DB端构成所谓的三层架构。B/S架构的系统无须特别安装，只有Web浏览器即可。
B/S架构中，显示逻辑交给了Web浏览器，事务处理逻辑在放在了WebApp上，这样就避免了庞大的胖客户端，减少了客户端的压力。因为客户端包含的逻辑很少，因此也被成为瘦客户端。B/S架构的优缺点优点：
1）客户端无需安装，有Web浏览器即可。
2）BS架构可以直接放在广域网上，通过一定的权限控制实现多客户访问的目的，交互性较强。
3）BS架构无需升级多个客户端，升级服务器即可。缺点：
1）在跨浏览器上，BS架构不尽如人意。
2）表现要达到CS程序的程度需要花费不少精力。
3）在速度和安全性上需要花费巨大的设计成本，这是BS架构的最大问题。
4）客户端服务器端的交互是请求-响应模式，通常需要刷新页面，这并不是客户乐意看到的。（在Ajax风行后此问题得到了一定程度的缓解）一通过表单简单的传输数据，利用js代码接收传递的数据，注意method属性要设为get。
<form id="form" action="datahtml" method="get"></form>//action的值是你的目的html
在你的目的html中可通过url接收传递的数据，并将数据保存在一个对象中。
<script type="text/javascript" charset="utf-8">
windowonload = function() {
var url = windowlocationsearch;//locationsearch是从当前URL的号开始的字符串
consolelog(url);
var Request = new Object();
if (urlindexOf('') != -1) {
var a = '';
var str = urlsubstr(1) //去掉号
strs = strsplit('&');
for (var i = 0; i < strslength; i++) {
a = strs[i]split('=')[0]；
Request[a] = decodeURI(strs[i]split('=')[1]);//解码,生成获取信息的对象
consolelog(Request[a]);
}
}
consolelog(Request);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
注意这种方式传递中文数据需要用decodeURIComponent()或decodeURL（）函数解码，unescape（）现在似乎已经淘汰了。
然后利用documentwrite()或innerHTML等方法或函数将数据显示在网页上。此种方法适合自己平时写JS的小练习，此种方法无法将数据保存下来。
2使用Cookie传递参数
下面是简单的实例，a页面保存Cookie，b页面读取。
ahtml
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a</title>
<script type="text/javascript">
/
@param {string} cookieName Cookie名称
@param {string} cookieValue Cookie值
/
function SetCookie(cookieName,cookieValue) {
/设置Cookie值/
documentcookie = cookieName + "=" + escape(cookieValue)
}
function login() {
var username = $("user")value;
if(usernamelength>0 && username) {
SetCookie("username", username);
/跳转到bhtml页面/
documentlocation = "bhtml";
}
}
function $(id) {
return documentgetElementById(id);
}
</script>
</head>
<body>
<div id="main">
<div><span>请输入你的名字</span><input type="text" id="user" /></div>
<div>
<input type="button" onclick="login()" value="提交" />
</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
bhtml
<html>
<head>
<meta charset="UTF-8">
<title>b</title>
<script type="text/javascript">
/
读取指定的Cookie值
@param {string} cookieName Cookie名称
/
function ReadCookie(cookie_name){
//判断是否存在cookie
if (documentcookielength > 0){
//查询cookie开始部分
cookie_start = documentcookieindexOf(cookie_name + "=")
//如果存在
if (cookie_start != -1){
//计算结束部分
cookie_start = cookie_start + cookie_namelength + 1
cookie_end = documentcookieindexOf(";", cookie_start)
//如果已经是最后一个cookie值，则取cookie长度
if (cookie_end == -1) {
cookie_end = documentcookielength
}
//获取cookie值，unescape对特殊字符解密
return unescape(documentcookiesubstring(cookie_start,cookie_end))
}
}
//其它情况返回空
return ""
}
function $(id) {
return documentgetElementById(id);
}
function init() {
var username = ReadCookie("username");
if(username && usernamelength>0) {
$("msg")innerHTML = "<h1>欢迎光临," + username + "!</h1>";
} else {
$("msg")innerHTML = "<a href='ahtm'>请录入名字</a>";
}
}
</script>
</head>
<body onload="init()">
<div id="msg"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
此种方法也是适合自己平时写JS的小练习，此种方法无法将数据保存下来。
3通过web服务器利用前后端交互
前后端交互又可分为表单交互和url参数交互。表单交互是指在HTML中创建一个表单，用户填写表单后提交给服务器，服务器收到表单后返回处理结果。其大致构成如下：
URL参数经常用于浏览器向服务器提交一些请求信息。其流程图大致如下：
例如利用nodejs与json文件相连接，实现对本地json数据的增删改查，在不同网页间传递数据。
————————————————
版权声明：本文为CSDN博主「想躺」的原创文章，遵循CC 40 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：>用电脑吗？ 我现在有个这样的。是很简单的那种， 单片机串口传入计算机。计算机通过网络传给服务器。 然后其他电脑就可以访问了。 如果要单片机直接传给服务器的，通过网络的话，好像有点复杂，如果单片机可以直接和web服务器连接就很简单。 弄
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）