如何利用表单传送数据给服务器
‘壹’ 如何制作简单的表单，如何提交数据
一、表单概述
表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。
1、表单的组成
一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框蚂滚等。 表单按钮：包括提交按钮、复位旦毕按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。 为了顾及不同的网页设计工具，本文只讲述代码的设计，不具体讲述操作方法，下面就是表单的HTML代码设计要点：
1.1 表单标签＜form＞＜闷迟余/form＞
‘贰’ 如何使用multipart/form-data格式上传文件
在网络编程过程中需要向服务器上传文件。Multipart/form-data是上传文件的一种方式。
Multipart/form-data其实就是浏览器用表单上传文件的方式。最常见的情境是：在写邮件时，向邮件后添加附件，附件通常使用表单添加，也就是用multipart/form-data格式上传到服务器。
表单形式上传附件
具体的步骤是怎样的呢？
首先，客户端和服务器建立连接（TCP协议）。
第二，客户端可以向服务器端发送数据。因为上传文件实质上也是向服务器端发送请求。
第三，客户端按照符合“multipart/form-data”的格式向服务器端发送数据。
既然Multipart/form-data格式就是浏览器用表单提交数据的格式，我们就来看看文件经过浏览器编码后是什么样子。
这行指出这个请求是“multipart/form-data”格式的，且“boundary”是 “---------------------------7db15a14291cce”这个字符串。
不难想象，“boundary”是用来隔开表单中不同部分数据的。例子中的表单就有 2 部分数据，用“boundary”隔开。“boundary”一般由系统随机产生，但也可以简单的用“-------------”来代替。
实际上，每部分数据的开头都是由"--" + boundary开始，而不是由 boundary 开始。仔细看才能发现下面的开头这段字符串实际上要比 boundary 多了个 “--”
紧接着 boundary 的是该部分数据的描述。
接下来才是数据。
“GIF”gif格式图片的文件头，可见，unknow1.gif确实是gif格式图片。
在请求的最后，则是 "--" + boundary + "--" 表明表单的结束。
需要注意的是，在html协议中，用 “ ” 换行，而不是 “ ”。
下面的代码片断演示如何构造multipart/form-data格式数据，并上传图片到服务器。
//---------------------------------------
// this is the demo code of using multipart/form-data to upload text and photos.
// -use WinInet APIs.
//
//
// connection handlers.
//
HRESULT hr;
HINTERNET m_hOpen;
HINTERNET m_hConnect;
HINTERNET m_hRequest;
//
// make connection.
//
...
//
// form the content.
//
std::wstring strBoundary = std::wstring(L"------------------");
std::wstring wstrHeader(L"Content-Type: multipart/form-data, boundary=");
wstrHeader += strBoundary;
HttpAddRequestHeaders(m_hRequest, wstrHeader.c_str(), DWORD(wstrHeader.size()), HTTP_ADDREQ_FLAG_ADD);
//
// "std::wstring strPhotoPath" is the name of photo to upload.
//
//
// uploaded photo form-part begin.
//
std::wstring strMultipartFirst(L"--");
strMultipartFirst += strBoundary;
strMultipartFirst += L" Content-Disposition: form-data; name="pic"; filename=";
strMultipartFirst += L""" + strPhotoPath + L""";
strMultipartFirst += L" Content-Type: image/jpeg ";
//
// "std::wstring strTextContent" is the text to uploaded.
//
//
// uploaded text form-part begin.
//
std::wstring strMultipartInter(L" --");
strMultipartInter += strBoundary;
strMultipartInter += L" Content-Disposition: form-data; name="status" ";
std::wstring wstrPostDataUrlEncode(CEncodeTool::Encode_Url(strTextContent));
// add text content to send.
strMultipartInter += wstrPostDataUrlEncode;
std::wstring strMultipartEnd(L" --");
strMultipartEnd += strBoundary;
strMultipartEnd += L"-- ";
//
// open photo file.
//
// ws2s(std::wstring)
// -transform "strPhotopath" from unicode to ansi.
std::ifstream *pstdofsPicInput = new std::ifstream;
pstdofsPicInput->open((ws2s(strPhotoPath)).c_str(), std::ios::binary|std::ios::in);
pstdofsPicInput->seekg(0, std::ios::end);
int nFileSize = pstdofsPicInput->tellg();
if(nPicFileLen == 0)
{
return E_ACCESSDENIED;
}
char *pchPicFileBuf = NULL;
try
{
pchPicFileBuf = new char[nPicFileLen];
}
catch(std::bad_alloc)
{
hr = E_FAIL;
}
if(FAILED(hr))
{
return hr;
}
pstdofsPicInput->seekg(0, std::ios::beg);
pstdofsPicInput->read(pchPicFileBuf, nPicFileLen);
if(pstdofsPicInput->bad())
{
pstdofsPicInput->close();
hr = E_FAIL;
}
delete pstdofsPicInput;
if(FAILED(hr))
{
return hr;
}
// Calculate the length of data to send.
std::string straMultipartFirst = CEncodeTool::ws2s(strMultipartFirst);
std::string straMultipartInter = CEncodeTool::ws2s(strMultipartInter);
std::string straMultipartEnd = CEncodeTool::ws2s(strMultipartEnd);
int cSendBufLen = straMultipartFirst.size() + nPicFileLen + straMultipartInter.size() + straMultipartEnd.size();
// Allocate the buffer to temporary store the data to send.
PCHAR pchSendBuf = new CHAR[cSendBufLen];
memcpy(pchSendBuf, straMultipartFirst.c_str(), straMultipartFirst.size());
memcpy(pchSendBuf + straMultipartFirst.size(), (const char *)pchPicFileBuf, nPicFileLen);
memcpy(pchSendBuf + straMultipartFirst.size() + nPicFileLen, straMultipartInter.c_str(), straMultipartInter.size());
memcpy(pchSendBuf + straMultipartFirst.size() + nPicFileLen + straMultipartInter.size(), straMultipartEnd.c_str(), straMultipartEnd.size());
//
// send the request data.
//
HttpSendRequest(m_hRequest, NULL, 0, (LPVOID)pchSendBuf, cSendBufLen)
‘叁’ android客户端如何提交表单数据给web服务器
1.服务器端的准备
为了完成该实例，我们需要在服务器端做以下准备工作：
（1）我们需要在MyEclipse中创建一个Web工程，用来模拟服务器端的Web服务，这里，我将该工程命名为了“myhttp”。
（2）修改该工程的“index.jsp”文件，添加两个输入框和一个提交按钮，作为该Web工程的显示页面。运行Tomcat，在浏览器中访问该Web工程，可以看到如图1所示的界面。
Web工程的显示页面
（3）在该Web工程中，创建一个继承自HttpServlet的LoginAction类，并实现其中的doPost()方法，用来响应图1所示页面的用户操作。具体实现如下：
由上述代码可以看出，当我们在图1所示的页面输入用户名“admin”，密码“123”时，点击提交按钮，会得到“Login succeeded!”的提示信息，如图2所示。若用户名、密码错误，则会得到“Login failed!”的提示信息。
2.客户端实现
在Android客户端，我们需要完成的工作是：以POST方式发送用户名密码到上述服务器，并获得服务器的验证信息。
我们分以下几个步骤来完成。
2.1 UI界面
在Android工程中，我们需要完成一个简单的UI界面，用来完成用户名密码的输入、发送POST请求、显示服务器的验证结果，完成后的界面如图3所示。
在MainActivity中，我们需要获取两个EditText控件的输入，“提交”按键的监听，以及服务器验证结果的TextView内容显示。具体实现代码如下：
2.2发送POST请求到服务器
可以看到上述代码中，我们调用了HttpUtils类的静态方法submitPostData()完成了发送POST请求到服务器，并将该方法的返回值（服务器的响应结果）显示在了TextView控件中。
通过以上的代码可以看出，在该方法中，其实完成了3件事：
（1）将用户名密码封装成请求体，这是通过调用getRequestData()方法来实现的（后面会讲到这个方法的具体实现）。
（2）设置HttpURLConnection对象的各种参数（其实是设置HTTP协议请求体的各项参数），然后通过httpURLConnection.getOutputStream()方法获得服务器输出流outputStream，再使用outputStream.write()方法将请求体内容发送给服务器。
（3）判断服务器的响应码，通过httpURLConnection.getInputStream()方法获得服务器的响应输入流，然后再调用dealResponseResult()方法处理服务器的响应结果。
2.3封装请求体
使用POST请求时，POST的参数不是放在URL字符串里，而是放在HTTP请求数据中，所以我们需要对POST的参数进行封装。
针对该实例而言，我们发送的URL请求是：http://192.168.1.101:8080/myhttp/servlet/LoginAction，但是我们需要将POST的参数（也就是username和password）封装到该请求中，形成如下的形式：
2.4处理响应结果
最后，我们再来看一看对服务器返回结果的处理是怎样的。因为在本实例中，服务器的返回结果是字符串“Login succeeded!”或“Login failed!”，所以这里我们需要做的就是将服务器的返回结果输入流转化成字符串。当然了，如果服务器返回的是图片，那么，我们就需要就得到的输入流转化成Bitmap图片了。如下代码是上面代码中用到的dealResponseResult()方法的具体实现。
2.5运行效果
‘肆’ 一个前端提交表单到另一个前端怎么操作
提交表单到另一个前端需要先了解两个前端之间的通信方式。一般来说，前端之间的通信可以通过以下几种方式实现：
1. 使用服务器端作为中介，通过HTTP请求或WebSocket进行通信。这种方式需要在服务器端建立接口，前端通过发送请求到服务器端来实现与另一个前端的通信。困念
2. 使用localStorage或sessionStorage进行数据共享。这种方式可以将数据存储在本地浏览器中，从而实现前端之间的数据共享。
3. 使用WebRTC进行通信。这种方式可以直接在浏览器之间建立点对点的连接，实现前端之间的实时通信。
具体到提交表单的操作，如果是通过服务器端作为中介进唤段行通信，可通过form表单的action属性指定服务器端接口的地址，通过method属性指汪链困定请求类型，以及通过表单元素的name属性来定义需要提交的数据。如果是通过localStorage或sessionStorage进行数据共享，可通过JavaScript代码获取表单数据，并将其存储到localStorage或sessionStorage中，另一个前端通过读取localStorage或sessionStorage中的数据来获取表单数据。如果是通过WebRTC进行通信，需要结合WebRTC的API实现表单数据的传输。