<html>
<head>
<title>XHR数据发送到后台</title>
</head>
<body>
<form action="index.php" method="post" onsubmit="return test()">
姓名:<input type="text" name="username"/><br />
年龄:<input type="text" name="age"/><br />
身高:<input type="text" name="sengao"/><br />
<input type="submit" />
</form>
<!--
后台$_POST后,会得到一个一维数组,数组单元就是由form表单数据组成的。
-->
<div></div>
<script type="text/javascript">
function test(){
//获取dom节点
var fm = document.getElementsByTagName('form')[0]
//利用HTML5 FormData对象获取表单数据
//并把DOM表单对象作为参数传给FormData
var fD = new FormData(fm)
//可以追加数据
fD.append('xuexing','A')
//创建XML请求
var xhr = new XMLHttpRequest()
//打开链接,异步请求
xhr.open('POST','index.php',true)
//发送表单数据
xhr.send(fD)
//事件响应
xhr.onreadystatechange = function (){
//接受到后台返回数据时,写入到div文本节点内
if(this.readyState == 4){
document.getElementsByTagName('div')[0].innerHTML = this.responseText
}
}
return false
}
</script>
</body>
</html>
1、前台jsp中数组变量:var checkedData = []//前台变量12、在ajax中设置该属性:traditional: true,//传数组进后台需要设置该属性1Ajax代码示例:$.ajax({url : URL_Business_QFCJPage,data : {"checkedData" : checkedData },dataType : 'json',type : "post",traditional: true,//属性在这里设置success : function(message) { //回调函数代码省略},waitMsg : '正在处理数据....'})123456789101112133、后台Servlet中这样获取:String[] s = request.getParameterValues("checkedData")//获取数组使用该函数1Servlet代码示例:package com.***@Controllerpublic class QFCJPageController {@RequestMapping("/business/QFCJPage")@ResponseBodypublic void CJ(HttpServletRequest request, HttpServletResponse response) throws IOException {//如果数组有中文,注意设置编码,防止接收数据乱码。request.setCharacterEncoding("utf-8") response.setCharacterEncoding("utf-8") String[] s = request.getParameterValues("checkedData")//"s"为获取的前台数组}}<!DOCTYPE html><html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title>XHR数据交换</title>
</head>
<body>
<form action="index.php" method="post" onsubmit="return test()">
姓名:<input type="text" name="username"/><br />
年龄:<input type="text" name="age"/><br />
身高:<input type="text" name="sengao"/><br />
<input type="submit" />
</form>
<div></div>
<script type="text/javascript">
function test(){
//获取dom节点
var fm = document.getElementsByTagName('form')[0]
//利用HTML5 FormData对象获取表单数据
//并把DOM表单对象作为参数传给FormData
var fD = new FormData(fm)
//可以追加数据
fD.append('xuexing','A')
//创建XML请求
var xhr = new XMLHttpRequest()
//打开链接,异步请求
xhr.open('POST','index.php',true)
//发送表单数据
xhr.send(fD)
//事件响应
xhr.onreadystatechange = function (){
//接受到后台返回数据时,写入到div文本节点内
if(this.readyState == 4){
document.getElementsByTagName('div')[0].innerHTML = this.responseText
}
}
return false
}
</script>
</body>
</html>