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

最新推荐文章于 2024-06-13 08:49:48 发布

秀山风歌

最新推荐文章于 2024-06-13 08:49:48 发布

阅读量1.1w

点赞数 4

分类专栏： js 文章标签： javascript 提交数据 post it 编程语言

js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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

标签： javascript 提交数据 post it 分类：编程语言
转自新浪博客阿涵-_-的博客

1 引言

编写Web程序的时候，客户端跟服务器必然有数据的传输，因此很多情况下，客户端需要向服务器提交大量的参数，包括中文和英文。这样一来就会有下面的问题：第一，这些参数很可能在页面的不同位置，例如，在不同的form标签下，因此单纯Html代码很不好实现；第二，参数中含有中文，很容易引发各种各样的编码问题；第三，客户端通过Get方式提交数据，编码问题比起使用Post方式来提交数据更为突出。
使用JavaScript向服务器以Post的方式提交数据可以克服以上几个问题。

2 技术原理

2.1为什么用Post？
向服务器提交数据常见的两种方式是Get和Post。Get方式一般会在url后面把参数带上，如“http://127.0.0.1:8080/struts2test/database/datatest.html?id=5&name=li”。
使用Get方式提交数据，浏览器会对URL进行URL encode，然后发送给服务器，不同的浏览器可能会有不同的编码方式，因此发送之前需要使用JavaScript对参数进行统一编码，比较麻烦，本文没有使用这种方法。
对于POST方式，表单中的参数值对是通过request body发送给服务器，此时浏览器会根据网页的meta标签中的content="text/html; charset=UTF-8"中指定的编码进行对表单中的数据进行编码，然后发给服务器，在服务器端的程序中我们可以通过request.setCharacterEncoding(“charset”)方式（JSP代码）设置编码，然后通过request.getParameter获得正确的数据。所以使用Post提交数据，编码方式就是我们可以控制的了。Post表单的Html一般写法如下：

<form action="test.jsp" method="post">
id:<input type="text" name="id"/>
name:<input type="text" name="name"/>
<input type="submit" value="发送"/>
</form>

总结一下使用Post方式提交数据相对于Get方式的优点[1]：
更加安全（数据不会出现在URL中）；
Get传输的数据量小，这主要是因为受URL长度限制；而Post可以传输大量的数据，所以在上传文件只能使用Post；
更少的乱码问题。（上面提到）
2.2为什么使用JavaScript?
使用Post提交数据可以采用纯Html来实现，为什么要使用JavaScript呢？实践证明，很多情况下，需要提交的数据分散在网页的各个地方，很难集中在一个Form标签下，直接通过Html的形式来提交数据既会使Html代码显得凌乱，又不优雅。
JavaScript结合DOM技术可以解决这个问题。DOM（Document Object Model)，即文本对象模型，它基于语义的逻辑结构，允许脚本访问Web文档的任一元素或内容。DOM不是JavaScript的一部分，而是内置在浏览器中的一个对象模型。[2]我们完全可以采用JavaScript操作Html文档的DOM对象，获得我们想要上传的数据，将其“组装”在一个Form中，然后以Post方式提交到服务器。
2.3JavaScript+Post优点?
具有Post方式提交数据的所有优点；
简化Html代码编写。主要的处理都在JavaScript脚本中进行；
使用JavaScript+Post方式提交数据，只需要在JavaScript脚本部分来“组装”和发送数据，增强了程序的可扩展性和可维护性。当要提交的数据较多或数据较分散的时候，这一优势更加明显。

3 源代码

3.1超链接形式

做web开发的时候经常会遇到中文乱码问题，这个问题一般是在用get方式提交数据时出现的，用post则一般可以避免中文乱码问题。我起初做开发的时候就遇到这种问题，于是我就想有没有什么办法能在点击某个超链接的时候将参数以post方式传到服务器呢？答案是肯定的，使用javascript就可以完成任务。

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

<script 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);
}
</script>

超链接的代码：

<a href="javascript:postwith('datatest.action',{'currentPage':'2','xisuo':'计算机'})">use js to post</a>

点击超链接后可以将currentPage、xisuo的值以post的形式发送到datatest.action进行处理，特别是在处理多个参数的时候显得非常方便。
3.2按钮形式
3.2.1 接收用户输入数据的页面a.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用javascript传递数据</title>
<script 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;i<inputs.length;i++) {
var myInput = document.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);
}
</script>
</head>
<body>
<form name="form1" action="a.jsp" method="post">
<input name="post_data" type="text"></input>
<input type="button" onclick="postData()" value="提交"></input>
</form>
<form name="form2" action="a.jsp" method="post">
<input name="post_data" type="text"></input>
<input type="button" onclick="postData()" value="提交"></input>
</form>
<form name="form3" action="a.jsp" method="post">
<input name="post_data" type="text"></input>
<input type="button" onclick="postData()" value="提交"></input>
</form>
</body>
</html>

a.html页面效果如图1。

如何使用javascript向服务器提交数据(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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>获得客户端数据</title>
</head>
<body>
<%
//这里设置的字符集要跟index.html中的charset一致

request.setCharacterEncoding("utf-8");
String[] text=request.getParameterValues("post_data");
for(String t : text){
out.print(t+"<br>");
}
%>
</body>
</html>

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

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

图2
在这里插入图片描述