小小博客，不足为外人道
分类： Web开发
2015-01-20 18:11:39
1 引言
2 技术原理
3 源代码
3.1超链接形式
3.2.1 接收用户输入数据的页面a.html
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<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
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。
图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" "">
<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+"
");
}
%>
body>
html>
例如用户输入的是“中国”“美国”“日本”三组中文，点击任一按钮后，跳转到a.jsp页面，页面如图2所示。
图2
4 结束语
本文提供了一种使用JavaScript向服务器提交数据的方法。一般来讲，我建议尽量都使用Post方式来提交数据，如果数据比较少而且集中的话，可以使用Form表单来提交即可。如果涉及到大量数据的提交或是数据在页面比较分散，强烈推荐采用JavaScript来完成数据提交。
参考文献
[1]Methods GET and POST in HTML forms - what's the difference?[Z]
[2]熊圣芬,贺智明，王俊.基于JavaScript和DOM的动态表单设计及数据提交[J].江西理工大学学报,2009,30(1):31-33.
