如何使用javascript向服务器提交数据(post)

1 简介

在编写Web程序时，客户端和服务器之间必然存在数据传输，因此很多情况下，客户端需要向服务器提交大量的参数，其中包括中文和英文。 这样就会存在以下问题：首先，这些参数很可能位于页面的不同位置，例如在不同的form标签下，因此纯Html代码不容易实现； 第二，参数中含有中文，非常困难，很容易造成各种编码问题； 第三，客户端通过Get方法提交数据，编码问题比使用Post方法提交数据更加突出。

通过以Post的形式向服务器提交数据可以克服上述问题。

2 技术原理

2.1 为什么使用Post？

向服务器提交数据的两种常见方式是 Get 和 Post。 Get方法一般在url后面带参数，如“:8080///.html?id=5&name=li”。

使用Get方法提交数据，浏览器会获取URL，然后发送到服务器。 不同的浏览器可能有不同的编码方式，所以发送之前需要对参数进行统一编码，比较麻烦。 本文没有使用这种方法。 方法。

对于POST方法，表单中的参数值对通过body发送到服务器，浏览器会根据网页的meta标签中指定的编码=“text/html”对表单中的数据进行编码; =UTF-8" 编码并发送给服务器。 在服务器端程序中，我们可以通过.("")（JSP代码）设置编码，然后通过.("")（JSP代码）得到正确的数据。 所以使用Post提交数据，编码方式是我们可以控制的。 Post表单的Html一般写法如下：

id:
name:

总结一下使用Post方法相对于Get方法提交数据的优点[1]：

更安全（数据不会出现在URL中）；

Get传输的数据量较小，主要是受URL长度的限制； 而Post可以传输大量数据，所以上传文件时只能使用Post；

乱码问题少了。 （上文提到的）

2.2 为什么使用它？

使用Post提交数据用纯Html就可以实现，为什么要用它呢？ 实践证明，很多情况下，需要提交的数据分散在网页的各个地方，很难集中到一个Form标签下。 直接以Html的形式提交数据，会让Html代码显得杂乱、不优雅。

结合DOM技术可以解决这个问题。 DOM（Model），即文本对象模型，它基于语义的逻辑结构，允许脚本访问Web文档的任何元素或内容。 DOM 不是浏览器的一部分，而是内置于浏览器中的对象模型。 [2]我们可以使用DOM对象来操作Html文档，获取我们要上传的数据，将其“组装”在Form中，然后通过Post的方式提交到服务器。

2.+Post有什么优势？

具有后期数据提交的所有优点；

简化Html代码编写。 主要处理在脚本中进行；

使用+Post方法提交数据只需要在脚本部分“组装”并发送数据，增强了程序的可扩展性和可维护性。 当需要提交的数据量较大或者数据比较分散时，这种优势更加明显。

3 源代码

3.1 超链接形式

在做web开发的时候，我们经常会遇到中文乱码的问题。 这个问题通常出现在用get提交数据的时候。 使用post一般可以避免中文乱码的问题。 我一开始做开发的时候也遇到过这样的问题，所以就想有没有办法在点击某个超链接的时候，以post方式将参数传递到服务器呢？ 答案是肯定的，你可以用它来完成任务。

话不多说，上代码，这是主要代码：

cript type="text/javascript">
function postwith(to, p) {
var myForm = document.create_r_r_rElement_x("form");
myForm.method = "post";
myForm.action = to;
for ( var k in p) {
var myInput = document.create_r_r_rElement_x("input");
myInput.setAttribute("name", k);
myInput.setAttribute("value", p[k]);
myForm.a(myInput);
}
document.body.a(myForm);
myForm.submit();
document.body.removeChild(myForm);
}
cript>

超链接代码：

点击超链接后，可以将xisuo的值发送到。 对于post形式的处理，尤其是处理多个参数时，非常方便。

3.2 按钮形式

3.2.1 接收用户输入数据的页面a.html

ta http-equiv="Content-Type" content="text/html; charset=utf-8">

cript type="text/javascript">
function postData(){
var myForm = document.create_r_rElement("form");
myForm.method = "post";
myForm.action = "a.jsp";
var inputs=document.getElementsByName("post_data");
var i;
for (i=0;iment.create_r_rElement("input");
myInput.type = "text";
myInput.name="post_data";
myInput.value=inputs[i].value;
myForm.a(myInput);
}
document.body.a(myForm);
myForm.submit();
document.body.removeChild(myForm);
}
cript>




nclick="postData()" value="提交">



nclick="postData()" value="提交">



nclick="postData()" value="提交">

a.html页面效果如图1所示。

如何使用向服务器提交数据（post）

图1

在a.html页面中输入几个汉字，点击任意按钮，跳转到a.jsp页面，a.jsp接收用户提交的数据并显示在页面上。

3.2.2 处理用户输入数据并输出到页面a.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>



ta http-equiv="Content-Type" content="text/html; charset=UTF-8">



<%
//这里设置的字符集要跟index.html中的charset一致
request.setCharacterEncoding("utf-8");
String[] text=request.getParameterValues("post_data");
for(String t : text){
out.print(t+"
");
}
%>

 

例如，用户输入“中国”、“美国”、“日本”三组汉字，点击任意按钮后，跳转到a.jsp页面，如图2所示。

如何使用向服务器提交数据（post）

图2

4。结论

本文提供了一种使用提交数据到服务器的方法。 一般来说，我建议大家尽量使用Post方式提交数据。 如果数据比较小且集中，可以使用Form表单提交。 如果涉及到大量数据的提交或者数据分散在页面上，强烈建议使用它来完成数据提交。

参考

[1] HTML 表单中的 GET 和 POST - 什么是？[Z]

〜/表格/.html

[2]熊胜芬，何志明，王军.基于DOM的动态表单设计与数据提交[J]. 江西科技大学学报，2009，30(1)：31-33。