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

本文探讨了使用POST方式提交数据的优点,包括安全性更高、能传输大量数据及减少乱码问题。同时介绍了如何利用JavaScript结合DOM技术简化HTML代码编写,并增强程序的可扩展性和可维护性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

转载于:https://my.oschina.net/huangjing1992/blog/746709

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值