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

摘要: )如何使用javascript向服务器提交数据(post)——（主要解决中文传参乱码的问题）

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.1超链接形式

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

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

<script type="text/javascript">

function postwith(to, p) {

var myForm = document.createElement_x("form");

myForm.method = "post";

myForm.action = to;

for ( var k in p) {

var myInput = document.createElement_x("input");

myInput.setAttribute("name", k);

myInput.setAttribute("value", p[k]);

myForm.appendChild(myInput);

}

document.body.appendChild(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进行处理，特别是在处理多个参数的时候显得非常方便。