form中el-table数据不显示_HTML FORM提交数据交互失败原因与解决方法

本篇及后续网页相关文章主要是针对开发过程中遇到的问题进行经验总结与分享。此次程序设计目标功能：根据form表单提交语言选项将当前Web界面设置成对应语言显示。

一、问题描述

在嵌入式设备中已放入对应语言翻译文件，切换Web语言设置选项，界面无法根据当前选择语言进行显示，切换时网页崩溃！

二、失败原因

由于是CGI程序，排查问题时考虑的较多，需逐一排除。一般问题产生可考虑以下几个原因：

1、标签没闭合，即代码错误；

2、提交form数据不成功，未传送到服务器；

3、数据截取不正确。

三、解决方法

针对可能存在原因一：用专业静态网页编写软件(sublime、webstorm等)进行检查，标签未闭合会被突出显示。按此方法检查，并不是问题产生原因，PASS。

针对可能存在原因二：我们要想知道自己提交数据是否成功，首先得掌握网页调试方法，这样我们才会知道form数据提交到哪里，提交的内容是哪些？最便捷的方法，我们可以借助浏览器本身的“开发者模式”进行查看，每种浏览器都有开发者模式，以Google浏览器为例，打开浏览器，按F12，进入开发者模式，如图所示：

我们可以看到提交表单所有相关信息，可以确定提交数据成功。设置language为1，代表中文简体，证明数据已正确发送至服务器。原因二PASS。

针对可能存在原因三：我们在CGI技术在嵌入式Web服务器的设计与实现一文中有讲过，提交的form数据流在环境变量中是以name1=value1...&name n=value n传输的，先申请一片缓存区，将stdin数据存入buf，通过下图代码来截取数据。

代码本身没有错误，但始终无法设置成功，描述网页有崩溃现象，可能陷入了死循环，没检测到'&'，后面代码没运行，所以参数未设置到CGI程序中。为了进一步验证猜测，在StartAdd=strstr(buf,"language=")+9;前面加一行保护代码if(strstr(buf,"language=") != NULL)，网页崩溃现象消失，说明数据流中没有"language="字符串，结合之前理论，这是不会发生的现象，但就是发生了！！！哭唧唧。

现在只能合理怀疑数据并不是按照name1=value1...&name n=value n存放，我们将提交数据buf打印到文件中，数据如下所示：

怀疑正确，但为什么会产生这种现象呢？最后查了一翻资料，涉及到post提交form表单在发送到服务器时的编码方式 ，一般form表单enctype属性未填写默认为application/x-www-form-urlencoded，在发送前编码所有字符，提交的数据请求body中按照 name1=value1...&name n=value n进行编码，name和value都要进行urlEncode；但是我们在此设置了该属性为multipart/form-data，指定传输数据为二进制格式，不对字符进行编码，提交时会随机生成一个boundary, 用于区分请求body中的各个数据; 每个数据以 --boundary 开始, 紧接着换行,下面是内容描述信息, 接着换2行, 接着是数据，然后以 --boundary-- 结尾, 最后换行。正是此原因导致了设置不成功。修改代码设置成功。

扩展，该属性值为text/plain时，提交空格转换为 "+" 加号，但不对特殊字符编码。

以上是本次总结内容，希望对大家有所帮助，也欢迎大家留言讨论。

END

点个在看再走吧~~~