1、先讲讲JQuery的概念
JQuery首先是由一个 America 的叫什么 John Resig的人创建的，后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库，这个类库集合了很多功能方法，利用类库你可以用简单的一些代码实现一些复杂的JS效果。
2、JQuery实现了 代码的分离
不用再网页中加入如：onclick之类的事件来调用函数了，直接引入JQuery类库和自己编写的JQuery代码就可以了；
如：
$(function(){
$("Element").click{function(){
alert("点击我哦！");
}
}
})；
上面的代码中 只要定义了Element 这个元素 后面的click是动作
alert("点击我哦！");这个是要执行的代码，当然你可以有很多的操作在这个函数中；
这里面的$这个号代表JQuery的意思 ，就是引用类库了。。。我是这么理解的；
3、JQuery的核心的一些方法
each(callback) '就像循环
$("Element").length; ‘元素的个数，是个属性
$("Element").size(); ’也是元素的个数，不过带括号是个方法
$("Element").get(); ‘某个元素在页面中的集合，以数组的形式存储
$("Element").get(index); ’功能和上面的相同，index表示第几个元素，数组的下标
$("Element").get().reverse(); ‘把得到的数组方向
$("Element1").index($("Element2")); ’元素2在元素1中的索引值是。。。
4、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦，但是他俩是可以转换滴)
$("*") ‘表示获取所有对象 但是我至今没这样用过
$("#XXX") ’获得 id=XXX 的元素对象（id可以是标签的id或CSS样式id） 常用
$("input[name='username']") 获得input标签中name='userName'的元素对象 常用
$(".abc") ' 获得样式class的名字是.abc的元素对象 常用
$("div") ' 标签选择器 选择所有的div元素 常用
$("#a,.b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素
$("#a .b p") 'ID号是a的并且使用了 b样式的 所有的p元素
示例：
<html>
<head>
<title>jquery测试</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.1.js"></script>
<style type="text/css">
.checkCss{
color:blue;
}
.redioCss{
color:red;
}
</style>
<script type="text/javascript">
$(function(){
// $("#XXX") 获得id=XXX的所有Jquery对象
$("#subt").click(function(){
// $("XXX") 获得XXX标签名的所有Jquery对象
alert("input 标签的对象个数为："+$("input").length);
// $("XXX[name='YYY']") 获得XXX标签名下name='YYY'的所有Jquery对象
// val()获得属性值
alert("name='userName'的输入框内容为："+$("input[name='userName']").val());
// 注意获得value值的第二种方式
alert("name='note'的输入框内容为："+$("input[name='note']").attr("value"));
alert("下拉菜单被选中项的文本为："+$("#sex option:selected").text());
alert("下拉菜单被选中项的值为："+$("#sex").val());
alert("复选框选中的个数为："+$("input[name='check']:checked").length);
if($("input[name='check']:checked").length>0){
var allCheckValue="";
var allCheckText="";
$("input[name='check']:checked").each(function(){
allCheckValue+=$(this).val()+" ";
allCheckText+=$(this).parent(".checkCss").text()+" ";
});
alert("复选框选中的文本为："+allCheckText+" 值为："+allCheckValue);
}
if($("input[name='status']:checked").length>0){
alert("单选框选中的文本为："+$("input[name='status']:checked").parent(".redioCss").text()+" 值为："+$("input[name='status']:checked").val());
}
});
});
</script>
</head>
<body>
姓名：<input type="text" name="userName" width="250"><br>
性别：<select id="sex" name="userSex" style="width: 155">
<option value="1">男</option>
<option value="2">女</option>
<option value="3">不男不女</option>
</select><br>
爱好：<span class="checkCss"><input type="checkbox" name="check" value="1">旅游</span>
<span class="checkCss"><input type="checkbox" name="check" value="2">音乐</span><br>
<span class="checkCss"><input type="checkbox" name="check" value="3">体育</span>
<span class="checkCss"><input type="checkbox" name="check" value="4">文学</span><br>
状态：<span class="redioCss"><input type="radio" name="status" value="1">在职</span>
<span class="redioCss"><input type="radio" name="status" value="2">离职</span><br>
简介：<input type="text" name="note" width="250"><br>
<input type="button" value="提交" id="subt"><br>
</body>
</html>
5、层级元素获取
$("Element1 Element2 Element3 ....") '前面父级 后面是子集
$("div > p") '获取div下面的所有的 p元素
$("div + p") 'div元素后面的第一个 p元素
$("div ~ p") 'div后面的所有的 p元素
6、简单对象获取
$("Element:first") 'HTML页面中某类元素的第一个元素
$("Element:last") 'HTML页面中某类元素的最后一个元素
$("Element:not(selector)") '去除所有与给定选择器匹配的元素,如：$("input:not(:checked)") 表示选择所有没有选中的复选框
$("Element:even") '获得偶数行
$("Element:odd“）'获得奇数行
$("Element:eq(index)") '取得一个给定的索引值
$("Element:gt(index)") '取得给定索引值的元素 之后的所有元素
$("Element:lt(index)") '取得给定索引值的元素 之前的所有元素
。。。
7、内容对象的获取和对象可见性
$("Element:contains(text)") '元素中是否包含text文本内容
$('Element:empty") '获得元素不包含子元素或文本的
$("Element:partnt") '获得元素包含子元素或文本的
$("Element:has(selector)") ‘是否包含某个元素， 如：$("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '选择所有可见元素
$("Element:visible") '选择所有不可见元素
8、其他对象获取方法
$("Element[id]") '所有带有ID属性的元素
$("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素
$("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素
$("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素
$("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素
$("Element[attribute *= youlika ]" '获得所有某个属性包含youlika的开头的元素
$("Element[selector1][selector2][....]") ’符合属性选择器，比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。
9、子元素的获取
$("Element:nth-child(index)") '选择父级下面的第n个元素
$("Element:nth-child(even)") '选择父级下面的偶数
$("Element:nth-child(odd)") '选择父级下面的奇数
$("Element:nth-child(3n+1)") '表达式
$("Element:first-child") '选择父级下面的第一个子元素
$("Element:last-child") '选择父级下面的最后一个子元素
$("Element:only-child") '匹配父级下的唯一的一个子级元素，例如dt在dl列表中唯一，那么将选择dt
10、表单对象获取
$(:input)//查找所有的Input元素，当然也包括下拉列表，文本域，单选框，复选框等。
$(:text)//匹配所有的单行文本框
$(:password)//匹配所有的密码框
$(:radio)//匹配所有的单选按钮
$(:checkbox)//匹配所有的复选框
$(:submit)//匹配所有的提交按钮
$(:image)//匹配所有的图像域，例如<input type="image" />
$(:reset)//匹配所有的重置按钮
$(:button)//匹配所有的按钮
$(:file)//匹配所有的文件上传域
$(:hidden)//匹配所有的不可见元素或者type为hidden的元素
$(:enabled)//匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)//匹配所有的不可用input元素，作用与上相反
$(:checked)//匹配所有选中的复选框元素
$(:selected)//匹配所有的下拉列表
11、元素属性的设置与移除
$("Element").attr(name) '取得第一个匹配的属性值，比如$("img").attr("src")
$("Element".attr(key,value)") '某一个元素设置属性
$("Element".attr({key:value,key1:value,....})) ‘为某个元素一次性设置多个属性
$("Element").attr(key,function) '为所有匹配的元素设置一个计算的属性值。
$("Element").removeAttr(name)//移除某一个属性
________________________________________________________________
Jquery:
1>attr()是获取或设置某个元素的属性。
<input type="text" name="userName" title="请输入用户名称！" >
例如：
获取输入框的title属性：$("input[name=userName]").attr("title");
设置输入框的title属性：$("input[name=userName]").attr("title","请输入姓名！");
function refresh() {
$("#randImg").attr("src","Rand?time="+ new Date().getTime());
}
<div>
<img src=”RandImag” id=”randImg”/>
</div>
使用jQuery的5种方法重写表单验证实例
之前在《eko对Ajax异步交互实现无刷新的理解》 这篇文章中，使用了Ajax的传统方法和AjaxGold框架2种方法实现了“可自动校验的表单”实例，今天eko使用jQuery的load()方 法、$.get()、$.post()、$.ajax()和表单插件（Form Plugin）5种方法分别重写“表单验证”实例(Ajax无刷新)，并且进一步说明中文乱码的问题（即编码和解码的问题）。与大家分享，呵呵~
如果对Ajax的传统方法和AjaxGold框架的方法，不是很理解，请阅读《eko对Ajax异步交互实现无刷新的理解》这篇文章。
使用jQuery的5种方法重写表单验证实例包下载
如果对下面的例子中的jQuery不感冒，请查看jQuery中文手册进行一一对照。下载地址
首先，对编码知识进行简要的说明，请务必理解后再看下面的代码喔!!
发送中文字符请求时，如果使用get方式，运行正常；而使用post方法则会出现乱码。这是由于异步对象XMLHttpRequest在处理返回的 responseText的时候，是按UTF-8编码进行解码的。如果你原来的网页编码是gb2312的话，当然会发生编码的冲突了；如果你原来的网页编 码是utf-8，那么就不会出现中文乱码的问题了。
出现了中文乱码该怎么办呢？通常的解决办法是用escape()对发送的数据进行编码，然后在返回的responseText上再用unescape() 进行解码。然而在JavaScript编程中通常不推荐使用escape()和unescape()，而推荐使用encodeURI()和 decodeURI()。请看下面的“表单验证实例”，或许对你学习编码知识有一定的帮助喔~
第一、jQuery的load(url,[data],[callback])方法
语法说明：url为异步请求的地址，data用来向服务器传送请求数据，为可选参数。一旦data参数启用，整个请求过程将以post的方式进行，否则默 认为get方式。如果希望在get方式下也传递数据，可以在url地址后面用类似“dataname1=data1& dataName2=data2”的方法。callback为Ajax加载成功后运行的回调函数。
另外使用load()方法返回的数据，不再需要考虑是文本还是XML，jQuery都会自动进行处理。
好了，下面马上使用load()方法实现“自动表单验证”实例。
首先是，html框架，5个例子都是一样的，如下：
<form>
用户昵称:<input type="text" οnblur="startCheck(this)" name="User" id="User"><span id="UserResult"></span><br />
输入密码:<input type="password" name="passwd1"><br />
确认密码:</td><td><input type="password" name="passwd2"><br />
<input type="submit" value="注册" class="button">
<input type="reset" value="重置" class="button">
</form>
必要说明：
1、οnblur="startCheck(this)" 这是JavaScript代码(简称js)
意思是text文本框失去焦点时触发自定义函数startCheck(),this是指代text文本框的值。
2、<span id="UserResult"></span>用来存放异步对象返回的结果。
jQuery代码如下：
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function startCheck(oInput){
//首先判断是否有输入，没有输入直接返回，并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格
var sUrl = "action.asp?user=" + oInput;
sUrl=encodeURI(sUrl); //使用encodeURI()编码，解决中文乱码问题
$("#UserResult").load(sUrl,function(data){
$("#UserResult").html(decodeURI(data)); //使用decodeURI()解码
}
);
}
</script>
必要说明：
1、使用jQuery时，都必须加载jquery.min.js文件，可以到http://jquery.com/官网下载最新的版本。
2、判断是否有输入时，用的全是JavaScript语法。
3、对传递给“处理页”的参数进行encodeURI编码，以解决中文乱码问题。
4、load()中的function函数是为了对返回结果进行decodeURI解码，以解决中文乱码问题。
5、对$.trim()、$("#UserResult")、html等jQuery语法不理解的，可以参考jQuery中文手册。本站提供下载。
action.asp处理页代码如下：
<%
if(Request("user")="eko") then
Response.Write "Sorry, " & Request("user") & " already exists."
else
Response.Write Request("user")&" is ok."
end if
%>
必要说明：
1、action.asp处理页的编码是GB2312，如果把"Sorry..already exists..is ik"等英文改为中文，请看下面的说明。
2、使用post方法会出现乱码，这是由于异步对象XMLHttpRequest在处理返回的responseText的时候，是按UTF-8编码进行解码的。
3、所以post方式的话，必须把action.asp页另存为时，第三项的编码由 ANST 改为 UTF-8 (请务必记住!!)
第二、使用$.get(url,[data],[callback])和$.post(url,[data],[callback])方法
语法说明：尽管load()方法可以实现get和post两种方式，但很多时候开发者还是希望能够指定发送方式，并且处理服务器返回的值。jQuery提 供了$.get()和$.post()两种方法，分别针对这两种请求方式。其中，url为请求地址，data为请求数据的列表，是可选参 数，callback为请求成功后的回调函数，该函数接受两个参数，第一个参数为服务器返回的数据，第二个参数为服务器的状态，是可选参 数。$.post()中的type为请求数据的类型，可以是html、xml、json等。
“可自动校验表单实例”的jQuery代码如下，html如上所述。
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
var username=$("#User").val();
//组合成对象的形式
var queryString={user:username};
return queryString;
}
function startCheck(oInput){
//首先判断是否有输入，没有输入直接返回，并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格
$.get("action.asp",createQueryString(),
function(data){
$("#UserResult").html(data);
});
}
</script>
必要说明：
1、对$.trim()、$("#UserResult")、html、val()等jQuery语法不理解的，可以参考jQuery中文手册。本站提供下载。
2、自定义函数createQueryString()，是对传入“处理页”的参数，进行处理。一种常规的方法。
3、因为是以get方式处理，说明这里不需要进行编码和解码。下面以post方式处理，则需要编码和解码了，代码如下
function createQueryString(){
//使用encodeURI()编码解决中文乱码问题
var username=encodeURI($("#User").val());
//组合成对象的形式
var queryString={user:username};
return queryString;
}
function startCheck(oInput){
//首先判断是否有输入，没有输入直接返回，并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格
$.post("action.asp",createQueryString(),
function(data){
$("#UserResult").html(decodeURI(data));
});
}
</script>
第三、使用$.ajax()方法
语法说明：尽管load()、$.get()和$.post()非常方便实用，但却不能控制错误和很多交互的细节，可以说这3种方法对Ajax的可控性较 差。jQuery提供了一个强大的函数$.ajax(options)来设置Ajax访问服务器的各个细节，它的语法十分简单，就是设置Ajax的各个选 项，然后指定相应的值。“可自动校验表单”实例代码如下：
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
//使用encodeURI()编码解决中文乱码问题
var username=encodeURI($("#User").val());
//组合成对象的形式
var queryString={user:username};
return queryString;
}
function startCheck(oInput){
//首先判断是否有输入，没有输入直接返回，并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格
$.ajax({
type: "GET",
url: "action.asp",
data: createQueryString(),
success: function(data){
$("#UserResult").html(decodeURI(data));
}
});
}
</script>
必要说明：
1、代码基本同上，只是$.ajax(options)稍有不同，对于其参数不理解可以参考jQuery中文手册。
2、给个建议，无论是get方式还是post方式，都习惯进行编码，以防出现中文乱码的问题。
3、再强调一下，无论使用哪种程序，如果遇到问题了，都可以参考相关的手册说明，这是建站所必需的。
上面的实例使用了jQuery的load()方法、$.get()、$.post()、$.ajax()的4种方法，都要考虑中文乱码的问题，下面推荐一个方法，进一步简化jQuery代码，呵呵。
第四、表单插件
表单插件（Form Plugin）是一款功能非常强大的插件，在jQuery官方网站上目前为4星级推荐，可以在http://plugins.jquery.com/project/form找到相关资料，下载后为jquery.form.js文件。该插件提供获取表单数据、重置表单项目、使用Ajax提交数据等一系列功能，深受开发人员的喜爱。
使用表单插件，再次重写“表单校验实例”，完整代码如下：
<form id="myform" action="action.asp">
用户昵称:<input type="text" οnblur="startCheck(this)" name="User" id="User"><input type="button" value="检 查" class="button"><span id="UserResult"></span><br />
输入密码:<input type="password" name="passwd1"><br />
确认密码:</td><td><input type="password" name="passwd2"><br /><br />
<input type="submit" value="注册" class="button"><input type="reset" value="重置" class="button">
</form>
html框架加了一个“检查”的按钮(使用手动校验的方法)，jQuery如下：
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" src="jquery.form.js"></script>
<script language="javascript">
function startCheck(oInput){
//首先判断是否有输入，没有输入直接返回，并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
}
$(function(){
$("input[type=button]").click(function(){
var options={
target: "#UserResult"
};
//表单的Ajax化
$("#myform").ajaxSubmit(options);
});
});
</script>
必要说明：
1、使用表单插件，必须加载jquery.form.js文件。
2、按Ajax方式提交数据，可以使用表单插件的ajaxSubmit(options)来按照Ajax的方式直接提交表单或者使用 ajaxform(options)方法，通常在页面加载完成时执行，用来将表单统一Ajax化，并且提交表单依然使用传统的submit按钮，只不过进 行的是Ajax提交。其中参数options与$.ajax(options)的参数基本相同，可以参考jQuery手册。
jquery JSON的解析方式
文章分类:Java编程
第一次用JSON作为jquery异步请求的传输对象，结果在jquery请求后返回的结果是字符串还是json对象上折腾了半天。等到问题解决了，也大致明白怎么个意思了，归根结底还是对jquery对相关json对象获取的理解有所偏差。
-
-
这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。
这里首先给出JSON字符串集，字符串集如下：
复制代码 代码如下:
var data="
{
root:
[
{name:'1',value:'0'},
{name:'6101',value:'西安市'},
{name:'6102',value:'铜川市'},
{name:'6103',value:'宝鸡市'},
{name:'6104',value:'咸阳市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'汉中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
]
}";
这里以jquery异步获取的数据类型——json对象和字符串为依据，分别介绍两种方式获取到的结果处理方式。
1.对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明：
var dataObj=eval("("+data+")");//转换为json对象
alert(dataObj.root.length);//输出root的子对象数量
$.each(dataObj.root,fucntion(idx,item){
if(idx==0){
return true;
}
//输出每个root子对象的名称和值
alert("name:"+item.name+",value:"+item.value);
})
注：对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变。
2. 对于服务器返回的JSON字符串，如果jquery异步请求将type（一般为这个配置属性）设为“json”，或者利用$.getJSON()方法获得 服务器返回，那么就不需要eval（）方法了，因为这时候得到的结果已经是json对象了，只需直接调用该对象即可，这里以$.getJSON方法为例说 明数据处理方法：
$.getJSON("http://gaoyusi.blog.163.com/",{param:"gaoyusi"},function(data){
//此处返回的data已经是json对象
//以下其他操作同第一种情况
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue，返回false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});
第一步：创建 名为"ajax" 的 Java Web项目。
第二步：加入struts2的jar包，这里需要四个包 freemarker.jar ognl.jar struts2-core.jar commons-fileupload.jar commons-io.jar xwork-core-2.1.6.jar（这个包加上版本号，是因为下文要提到它），这六个包是struts必须依赖的jar包，什么好说的。
第三步：修改 web.xml 加入 struts的过滤器，代码如下：
view plaincopy to clipboardprint?
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
第四步：加入json的包，这里需要两个：json-lib.jar jsonplugin.jar 这里要注意很重要的一点，因为json大量引用了Apache commons的包，所以这里要一并加入，需要的commons包共4个，除了commons的包外，还需要引入一个 ezmorph的包，所以这一步一共要引入7个包，列出如下：commons-collections.jar commons-lang.jar commons-beanutils.jar commons-logging.jar ezmorph.jar 再加上json的两个包共七个，一次性加入。
第五步：写后台处理AjaxLoginAction.action，内容如下：
view plaincopy to clipboardprint?
package qy.test.action;
import java.util.HashMap;
import java.util.Map;
import net.sf.json.JSONObject;
import com.opensymphony.xwork2.ActionSupport;
public class AjaxLoginAction extends ActionSupport {
// 用户Ajax返回数据
private String result;
// struts的属性驱动模式，自动填充页面的属性到这里
private String loginName;
private String password;
@Override
public String execute() {
// 用一个Map做例子
Map<String, String> map = new HashMap<String, String>();
// 为map添加一条数据，记录一下页面传过来loginName
map.put("name", this.loginName);
// 将要返回的map对象进行json处理
JSONObject jo = JSONObject.fromObject(map);
// 调用json对象的toString方法转换为字符串然后赋值给result
this.result = jo.toString();
// 可以测试一下result
System.out.println(this.result);
return SUCCESS;
}
//getter setter 方法省略
}
package qy.test.action;
import java.util.HashMap;
import java.util.Map;
import net.sf.json.JSONObject;
import com.opensymphony.xwork2.ActionSupport;
public class AjaxLoginAction extends ActionSupport {
// 用户Ajax返回数据
private String result;
// struts的属性驱动模式，自动填充页面的属性到这里
private String loginName;
private String password;
@Override
public String execute() {
// 用一个Map做例子
Map<String, String> map = new HashMap<String, String>();
// 为map添加一条数据，记录一下页面传过来loginName
map.put("name", this.loginName);
// 将要返回的map对象进行json处理
JSONObject jo = JSONObject.fromObject(map);
// 调用json对象的toString方法转换为字符串然后赋值给result
this.result = jo.toString();
// 可以测试一下result
System.out.println(this.result);
return SUCCESS;
}
//getter setter 方法省略
}
第六步：写前台index.jsp，注意加入 jquery的js文件 内容如下：
view plaincopy to clipboardprint?
<%@ 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">
<mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready( function() {
//使用 Ajax 的方式 判断登录
$("#btn_login").click( function() {
var url = 'ajaxLogin.action';
alert("===");
//获取表单值，并以json的数据形式保存到params中
var params = {
loginName:$("#loginName").val(),
password:$("#password").val(),
}
//使用$.post方式
$.post(
url, //服务器要接受的url
params, //传递的参数
function cbf(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
//alert(data);
var member = eval("("+data+")"); //包数据解析为json 格式
$('#result').html("欢迎您： "+member.name);
},
'json' //数据传递的类型 json
);
});
});
// --></mce:script>
</head>
<body>
<span>用户名：</span>
<input type="text" id="loginName" name="loginName">
<br />
<span>密码：</span>
<input type="password" name="password" id="password">
<br />
<input type="button" id="btn_login" value="Login" />
<p>
这里显示ajax信息：
<br />
<span id="result"></span>
</p>
</body>
</html>
<%@ 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">
<mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready( function() {
//使用 Ajax 的方式 判断登录
$("#btn_login").click( function() {
var url = 'ajaxLogin.action';
alert("===");
//获取表单值，并以json的数据形式保存到params中
var params = {
loginName:$("#loginName").val(),
password:$("#password").val(),
}
//使用$.post方式
$.post(
url, //服务器要接受的url
params, //传递的参数
function cbf(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
//alert(data);
var member = eval("("+data+")"); //包数据解析为json 格式
$('#result').html("欢迎您： "+member.name);
},
'json' //数据传递的类型 json
);
});
});
// --></mce:script>
</head>
<body>
<span>用户名：</span>
<input type="text" id="loginName" name="loginName">
<br />
<span>密码：</span>
<input type="password" name="password" id="password">
<br />
<input type="button" id="btn_login" value="Login" />
<p>
这里显示ajax信息：
<br />
<span id="result"></span>
</p>
</body>
</html>
第七步：在src目录下加入struts.xml，并配置相应的xml文件，为ajax请求提供数据。代码如下：
view plaincopy to clipboardprint?
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="ajax" extends="json-default">
<action name="ajaxLogin" class="qy.test.action.AjaxLoginAction">
<!-- 返回类型为json 在sjon-default中定义 -->
<result type="json">
<!-- root的值对应要返回的值的属性 -->
<!-- 这里的result值即是 对应action中的 result -->
<param name="root">result</param>
</result>
</action>
</package>
</struts>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="ajax" extends="json-default">
<action name="ajaxLogin" class="qy.test.action.AjaxLoginAction">
<!-- 返回类型为json 在sjon-default中定义 -->
<result type="json">
<!-- root的值对应要返回的值的属性 -->
<!-- 这里的result值即是 对应action中的 result -->
<param name="root">result</param>
</result>
</action>
</package>
</struts>
第八步：如果第四步没有加入commons-logging.jar包，这里要记得加入
第九步：发布运行。很不幸，你会发现一个错误，
java.lang.ClassNotFoundException: com.opensymphony.xwork2.util.TextUtils:
这是struts的版本错误，因为用的xwork2.1.6-core.jar中不存在TextUtils类，这里把 xwork2.1.2-core.jar也加到classpath中，xwork2.1.2-core.jar中包含这个东西，我们用的是 xwork2.1.6的jar，当要用到TextUtils时，就去xwork2.1.2-core.jar中找。
来自: http://hi.baidu.com/lf0927/blog/item/4a33f4f2a80ce7c00b46e075.html
基于jQuery的AJAX和JSON实现纯html数据模板
通过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。
我们先来看一下html模板：
<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
<tr>
<th>
订单ID</th>
<th>
客户ID</th>
<th>
雇员ID</th>
<th>
订购日期</th>
<th>
发货日期</th>
<th>
货主名称</th>
<th>
货主地址</th>
<th>
货主城市</th>
<th>
更多信息</th>
</tr>
<tr id="template">
<td id="OrderID">
</td>
<td id="CustomerID">
</td>
<td id="EmployeeID">
</td>
<td id="OrderDate">
</td>
<td id="ShippedDate">
</td>
<td id="ShippedName">
</td>
<td id="ShippedAddress">
</td>
<td id="ShippedCity">
</td>
<td id="more">
</td>
</tr>
</table>
一定要注意的就是里面所有的id属性，这个是一个关键。再来看一下AJAX请求和绑定数据的代码。
$.ajax(...{
type: "get",//使用get方法访问后台
dataType: "json",//返回json格式的数据
url: "BackHandler.ashx",//要访问的后台地址
data: "pageIndex=" + pageIndex,//要发送的数据
complete :function()...{$("#load").hide();},//AJAX请求完成时隐藏loading提示
success: function(msg)...{//msg为返回的数据，在这里做数据绑定
var data = msg.table;
$.each(data, function(i, n)...{
var row = $("#template").clone();
row.find("#OrderID").text(n.订单ID);
row.find("#CustomerID").text(n.客户ID);
row.find("#EmployeeID").text(n.雇员ID);
row.find("#OrderDate").text(ChangeDate(n.订购日期));
if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期));
row.find("#ShippedName").text(n.货主名称);
row.find("#ShippedAddress").text(n.货主地址);
row.find("#ShippedCity").text(n.货主城市);
row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>");
row.attr("id","ready");//改变绑定好数据的行的id
row.appendTo("#datas");//添加到模板的容器中
});
这个是jQuery的AJAX方法，返回数据并不复杂，主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个“var row = $("#template").clone();”先把模板复制一份，接下来row.find("#OrderID").text(n.订单ID);，表 示找到id=OrderID的标记，设置它的innerText为相应的数据，当然也可以设置为html格式的数据。或者是通过外部的函数把数据转换成需 要的格式，比如这里row.find("#OrderDate").text(ChangeDate(n.订购日期));有点服务器控件做模板绑定数据的 感觉。
所有的这些，都是放在一个静态的页面里，只通过AJAX方法从后台获取数据，所有html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test1</title>
<script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script>
<script language="javascript" type="text/javascript" src="js/PageDate.js"></script>
</head>
<body>
<div>
<div>
<br />
<input id="first" type="button" value=" << " /><input id="previous" type="button"
value=" < " /><input id="next" type="button" value=" > " /><input id="last" type="button"
value=" >> " />
<span id="pageinfo"></span>
<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
<tr>
<th>
订单ID</th>
<th>
客户ID</th>
<th>
雇员ID</th>
<th>
订购日期</th>
<th>
发货日期</th>
<th>
货主名称</th>
<th>
货主地址</th>
<th>
货主城市</th>
<th>
更多信息</th>
</tr>
<tr id="template">
<td id="OrderID">
</td>
<td id="CustomerID">
</td>
<td id="EmployeeID">
</td>
<td id="OrderDate">
</td>
<td id="ShippedDate">
</td>
<td id="ShippedName">
</td>
<td id="ShippedAddress">
</td>
<td id="ShippedCity">
</td>
<td id="more">
</td>
</tr>
</table>
</div>
<div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
LOADING....
</div>
<input type="hidden" id="pagecount" />
</div>
</body>
</html>
PageData.js就是包括上面AJAX请求和绑定数据代码的js，整个页面连form都不用，这样做有什么好处呢。再看下面一个模板
<ul id="datas">
<li id="template">
<span id="OrderID">
fsdfasdf
</span>
<span id="CustomerID">
</span>
<span id="EmployeeID">
</span>
<span id="OrderDate">
</span>
<span id="ShippedDate">
</span>
<span id="ShippedName">
</span>
<span id="ShippedAddress">
</span>
<span id="ShippedCity">
</span>
<span id="more">
</span>
</li>
</ul>
还是要注意id属性。大家看到这里应该明白了，不管用什么样的表现形式，只要id属性相同，就可以把数据绑定到对应的位置。这样的话，我们这些做程序的就 不会因为美工的修改而修改代码了，而且美工也只要做出html就可以了，不需要为服务器控件做模板（不过我还没遇到过这样的美工，都是美工设计好了我来改 成服务器控件的模板）。
再简单说一下AJAX请求的后台，用的是Access的Northwind数据库，把订单表放到DataTable里，然后通过DataTable2JSON（http://blog.csdn.net/luq885/archive/2007/06/05/1639853.aspx）转化成JSON数据格式传回来就完了，不过后台用了一些分页和缓存的方法，希望对初学者有一些帮助。
全部例子到http://www1.51ok.com/down.do?7A5EFE8D0FD43CDF61D8980635F8708A下载，其中test.htm是用table模板实现的，test2.htm是用ul模板实现的。效果如下：
<html>
<head>
<title>jQuery Ajax 实例演示</title>
</head>
<script src="./js/jquery.js" type="text/java script"></script>
<script type="text/java script">
$(document).ready(function(){//这个就是jQueryready ，它就像C语言的main 所有操作包含在它里面
$("#button_login").mousedown(function(){
login(); //点击ID为"button_login"的按钮后触发函数 login();
});
});
function login(){ //函数 login();
var username = $("#username").val();//取框中的用户名
var password = $("#password").val();//取框中的密码
$.ajax({ //一个Ajax过程
type: "post", //以post方式与后台沟通
url : "login.php", //与此php页面沟通
dataType:'json',//从php返回的值以 JSON方式 解释
data: 'username='+username+'&password='+password, //发给php的数据有两项，分别是上面传来的u和p
success: function(json){//如果调用php成功
//alert(json.username+'\n'+json.password); //把php中的返回值（json.username）给 alert出来
$('#result').html("姓名:" + json.username + "<br/>密码:" + json.password); //把php中的返回值显示在预定义的result
定位符位置
—————————————————————————————————
struts2,jquery,ajax实现无刷新登录
1. action：
/**
* 会员登录
*/
public String login() {
try {
Object object = memberinfoManager.validate(memberinfoPO);
if (object == null) {
message = "failure";
} else {
memberinfoPO = (MemberinfoPO) object;
Map<String, Object> session = ServletActionContext.getContext()
.getSession();
session.put("memberinfoPO", memberinfoPO);
// 登录成功以后显示信息
String s = "";
if (memberinfoPO.getSex().equals("男")) {
s = "先生";
} else {
s = "女士";
}
message = memberinfoPO.getUsername()
+ s + " "
+ "欢迎您登录 | <a href='#'>进入会员中心</a> | & lt;a href='javascript:logout()'>退出登录</a>";
}
} catch (Exception e) {
logger.error(e.toString(), e);
}
return SUCCESS;
}
/**
* 退出登录
*/
public String loginOut() {
try {
ServletActionContext.getContext().getSession().remove("memberinfoPO");
} catch (Exception e) {
logger.error(e.toString(),e);
}
return SUCCESS;
}
2 struts.xml
<result type="json">
<param name="excludeProperties">logger,memberinfoManager,organizationpos,menuUtil
,organizationListMap,typeop,typeDao</param>
</result>
3.jsp
<s:if test="#session.memberinfoPO == null">
<div id="loginResult"></div>
<div id="loginForm">
用户名 <input type="text" name="memberinfoPO.loginname" id="username" /> 密码：
<input type="password" name="memberinfoPO.loginpass" id="password" />
<input type="checkbox" name="checkbox" value="checkbox" />
自动登录
<input type="submit" value="登录" οnclick="userLogin()"/>
免费注册
欢迎登录交通物流信息平台
</div>
</s:if>
<s:else>
<s:set value="#session.memberinfoPO" var="member" />
<div id="loginResult">
<s:property value="#member.username"/><s:if test='#member.sex == "男"'>先生</s:if><s:else>女士</s:else>
欢迎您登录 | <a href='#'>进入会员中心</a> | & lt;a href='javascript:logout()'>退出登录</a>
</div>
<div id="loginForm" style="display: none;">
用户名 <input type="text" name="memberinfoPO.loginname" id="username" /> 密码：
<input type="password" name="memberinfoPO.loginpass" id="password" />
<input type="checkbox" name="checkbox" value="checkbox" />
自动登录
<input type="submit" value="登录" οnclick="userLogin()"/>
免费注册
欢迎登录交通物流信息平台
</div>
</s:else>
4.js
function userLogin() {
var username = $("#username").val();
var password = $("#password").val();
if (username == "" || username == null) {
alert("请输入用户名！");
} else if (password == "" || password == null) {
alert("请输入密码！");
} else {
$.ajax( {
url :"memberinfo/memberinfo_login",
type :"post",
dataType :"json",
data :"memberinfoPO.loginname=" + username
+ "&memberinfoPO.loginpass=" + password,
timeout :20000,// 设置请求超时时间（毫秒）。
error : function() {// 请求失败时调用函数。
$("#loginResult").html("请求失败!");
},
success :callbackLogin
});
}
}
function callbackLogin(json) {
$("#loginForm").hide();
if (json.message == 'failure') {
$("#loginResult").html("用户名或密码错误！<a href='javascript:loginAgain()'>请重新登录</a>");
$("#loginResult").show();
} else {
alert("登录成功！");
$("#loginResult").html(json.message);
$("#loginResult").show();
}
}
function loginAgain() {
$("#loginResult").hide();
$("#loginForm").show();
}
function logout() {
$.ajax( {
url :"memberinfo/memberinfo_loginOut",
type :"post",
dataType :"json",
timeout :20000,// 设置请求超时时间（毫秒）。
error : function() {// 请求失败时调用函数。
$("#loginResult").html("请求失败!");
},
success :callbackLoginOut
});
}
function callbackLoginOut() {
$("#loginResult").hide();
$("#loginForm").show();
}
5,
将jquery.js,json-lib-2.1.jar,struts2-json-plugin-2.1.8.1.jar
}
});
//$.post()方式：
$('#test_post').mousedown(function (){
$.post(
'login.php',
{
username:$('#username').val(),
password:$('#password').val()
},
function (data) //回传函数
{
var myjson='';
eval('myjson=' + data + ';');
$('#result').html("姓名1:" + myjson.username + "<br/>密码1:" + myjson.password);
}
);
});
//$.get()方式：
$('#test_get').mousedown(function ()
{
$.get(
'login.php',
{
username:$('#username').val(),
password:$('#password').val()
},
function(data) //回传函数
{
var myjson='';
eval("myjson=" + data + ";");
$('#result').html("姓名2:" + myjson.username + "<br/>密码2:" + myjson.password);
}
);
});
}
</script>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
<p><span>输入姓名:</span><input type="text" name="username" id="username" /></p>
<p><span>输入密码:</span><input type="text" name="password" id="password" /></p>
</form>
<button id="button_login">ajax提交</button>
<button id="test_post">post提交</button>
<button id="test_get">get提交</button>
</body>
</html>
Struts 2+Jquery+JSON（登录验证）
JSON 2010-08-02 16:47:39 阅读658 评论3 字号：大中小 订阅
网上有许多关于Struts2与JSON的文章，Google加百度，查阅了许多，有各种各样的做法。其中，大部分的文章都说要加进一个叫 jsonplugin的插件，在Google Code可以下载。以前我有做过测试，也是用它，但着实麻烦，要让Struts2的package继承一个叫“json-default”的父 package。网上的文章，大部分都是说从Struts的Action如何把JSON数据发送回浏览器端（Ajax），而我想要一个跟它们相反的过程 （即从Ajax端发送数据到服务器端的Action并解析出来），却找不到合适的答案。摸索了三个晚上，未果。今天终于让我找到了思路。
其中，不管是从浏览器端（JS，Ajax，Jquery等）发送给服务器端，还是从服务器端（Struts的Action，Servlet等）发送回客户端，都要识别一点：发送的都应该是JSON格式的字符串。
下面，我们先来重写登录模块中的loginform.jsp文件，原来的代码，请看Struts 2.1.6 精简实例系列教程(2)：用户登录模块的实现，现在修改的代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!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>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
var loginName1 = $("input[name='loginName']").val(); //获取账号
var password1 = $("input[name='password']").val(); //获取密码
var jsonUser = {loginName:loginName1, password:password1}; //JSON对象
//注意:jsonUser.toString()这种方法错误,javaScript中的toString是用于布尔型变量的,而应用以下方法
var strUser = JSON.stringify(jsonUser); //将JSON对象转变成JSON格式的字符串,
$.post("user/login.action", {json: strUser}, callback, "json");
});
function callback(json){
alert(json.msg); //显示反馈信息
if(json.suc == 1){ //如果返回"登录成功"
window.location.href = "admin/index.action"; //跳转到后台主页
}
}
});
</script>
</head>
<body>
<form action="user/login.action" method="post">
账号<input type="text" name="loginName"/><br/>
密码<input type="password" name="password"><br/>
<input type="button" id="submit" value="登录"/>
</form>
</body>
</html>
关键的两句是：
var jsonUser = {loginName:loginName1, password:password1}; (1)
var strUser = JSON.stringify(jsonUser); (2)
第（1）句是组装JSON对象，关于JSON对象的格式，建议大家到http://www.json.org/网站上学习一下，要验证你写的 JSON对象是否正确，可在http://json.bloople.net/网站上验证。上面写的JSON对象其实是非常简单的一种，jsonUser 对象里有两个属性，分别是loginName和password，而表示这两个属性，用key-value的形式，loginName1和 password1分别是接收表单中的账号、密码的值。
第（2）句，相当重要，通过JavaScript内置对象JSON的stringify方法，将JSON对象转换成字符串。因为，我们传送给服务器端的要是JSON格式的字符串。
$.post("login!valid.action", {json: strUser}, callback, "json");
这一句，Jquery用POST方法向服务器端发送数据，login!valid.action是我们要发送到的目的URI，也即直达 loginAction的valid方法。而{…}是我们要发送的数据（data），{json:strUser}，其实也是一个JSON对 象，Key：value的形式，大家注意，我们把strUser这个json串发过去，在Action那里接收时，要接收“json”这个变量，这个变量 的值就是我们发送的strUser字符串。
回调函数（callback）是指服务器端成功发回时，在JS端执行的函数。最后一个参数“json”是返回数据类型的一种，另外，还有”text”、“xml”等。而function callback函数体的内容，大家看完LoginAction类后，自然会明白。
好，Show一下修改后的LoginAction.java，代码如下：
package cn.simple.action;
import java.io.IOException;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import org.json.JSONObject;
import cn.simple.pojo.User;
import com.opensymphony.xwork2.ActionSupport;
//@Results({
// @Result(name="success", location="admin/index.action", type="redirect"),
// @Result(name="input", location="loginform.jsp", type="dispatcher")
//})
public class LoginAction extends ActionSupport {
private String json; //JSON字符串,JS与Action传递数据的载体
public String getJson() {
return json;
}
public void setJson(String json) {
this.json = json;
}
/** *//**
* 登录验证
* @throws Exception
*/
public void valid() throws Exception {
JSONObject jsonObj = new JSONObject(json); //将JSON格式的字符串构造成JSON对象
String loginName = jsonObj.getString("loginName"); //获取JSON对象中的loginName属性的值
String password = jsonObj.getString("password"); //获取JSON对象中的password属性的值
if(loginName=="yutong"){
//此时的JSON对象,有两个属性suc和msg,其中suc表示是否登录成功的状态
json = "{suc:0, msg:'用户名不存在'}"; //构造JSON格式的字符串
} else if( ! password.equals("123")){
json = "{suc:0, msg:'密码不正确!'}";
} else {
json = "{suc:1, msg:'登录成功!'}";
}
sendMsg(json); //发送JSON格式的字符串回JS端
}
/** *//**
* 向客户端的JS发送字符串
* @param content 发送的内容
* @throws IOException
*/
public void sendMsg(String content) throws IOException{
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.getWriter().write(content);
}
}
我们说过了，JS与Action互相传送的是JSON格式的字符串，故在LoginAction里，我们定义了private String json这个成员属性及其getter和setter方法。
或者，打成jar包，放到项目lib目录下。我们就可以使用JSON类库提供给我们的方法了。
网上有另一个JSON的类库：json-lib，大家也可下载使用一下，不过，它要引进几个其他的jar包，详细请见http://json- lib.sourceforge.net/。个人使用它的感受，也真有点郁闷，测试它时，想找一个从JSON字符串转换成JSON对象的方法，找了半天也 没找到。不过，它对Java的Bean,Map,List等与JSONObject的互转换做得还好。
sendMsg方法，是从Struts的Action中调用回原生Servlet的response来向浏览器端发送数据。
还有一点，大家应该注意到，我们在LoginAction中写的valid方法返回类型是void型的，跟我们以前做的返回 “success”、”input”之类的String类型不同。当我们通过 “!valid”来方法它时，它不作跳转，而是像我们平时Servlet中那种直接显示HTML类似。这一点达成了Ajax与Struts的成功交互。而 网上许多写jsonplugin插件使用的文章，所调用的方法都是返回String类型，然后，再来个<result type=”json”>，那样感觉挺麻烦的，不如直接让Ajax发来的请求与void类型的方法交互，不直接爽快？
好，让我们运行一下，看看效果吧：
大家看看fireFox的debug的控制台中显示的：
好，我们来输入一个正确的账号和密码，如下：
点确定后，网页就跳到了后台主页。
这样，Ajax(Jquery)与Struts2.1.6的交互，通过JSON格式的字符串传递数据，这一实践就完成了。有一点需要说明一下：本例 中的JSON对象都是相对比较简单，还有一些复杂的JSON对象，如{company:{building:”五角大楼”，employees： [{name:”tom”,age:21},{name:”marry”,age:18} ] } }。至于这些，该怎么处理呢？其实，处理方法也一样的。只是在Action中调用JSON类库的一些对象和方法，就能很好地处理。
关于Struts2,JSON,Jquery的话题，我们会在Struts2.1.6精简实例系列教程之外，继续讨论。
function add(){
windows.location.href="articleedit.do";
}
function search()
{
var m=document.AnythingTypeForm;
m.initial.value=true;
m.submit();
}
function add()
{ alert("sdf");
var=articleedit.do
document.location.href=url;
}
function edit()
{
var m=document.AnythingTypeForm;
if(isCheck(m.refID))
{
var idList=choose(m,'refID');
var id=getFirstID(idList);
var url=m.action+"?method=edit&classId="+id;
if(idList.indexOf(",")!=-1)
{
if(window.confirm("你选择了多个类别,系统将只对你选择的第一个类别进行修改!"))
document.location.href=url;
}
else
document.location.href=url;
}
else
{
alert("你必须选中一项进行此操作!!");
return false;
}
}
function del()
{
var m=document.AnythingTypeForm;
if( m.refID==null) return;
if(isCheck(m.refID))
{
if(window.confirm("您确定要删除选中的类别吗？"))
{
m.method.value='delete';
m.target="_self"
m.submit();
}
else
return false;
}
else
{
alert("你必须至少选中一项进行此操作!!");
return false;
}
}
function getFirstID(idList) {
var id;
var iLop = idList.indexOf(",");
if (iLop != -1)
{
id = idList.substring(0, iLop);
}
else
{
id = idList;
}
return id;
}
function TCheckBox(sBoxName,flag)
{
var j = 0;
var i = 0;
var tChecked;
var idList=choose(m,'refID');
var id=getFirstID(idList);
var url=m.action+"?method=edit&classId="+id;
if (sBoxName.length> 1) {
for(i=0;i <=sBoxName.length-1;i++){
if(sBoxName(i).checked){
j=j+1;
tChecked = i;
}
}
}
else {
if (sBoxName.checked){
j=1;
tChecked = 1;
}
}
if (j==0){
alert( "您没有选择记录，请选择记录 ");
return false;
}
if (j> 1){
alert( "您选择了多条记录，请只选一条记录 ");
return false;
}
按照一、二楼的方法，使用一个timestamp 字段，并设置其默认值为CURRENT_TIMESTAMP 即可。
________________________________________________
JQuery首先是由一个 America 的叫什么 John Resig的人创建的，后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库，这个类库集合了很多功能方法，利用类库你可以用简单的一些代码实现一些复杂的JS效果。
2、JQuery实现了 代码的分离
不用再网页中加入如：onclick之类的事件来调用函数了，直接引入JQuery类库和自己编写的JQuery代码就可以了；
如：
$(function(){
$("Element").click{function(){
alert("点击我哦！");
}
}
})；
上面的代码中 只要定义了Element 这个元素 后面的click是动作
alert("点击我哦！");这个是要执行的代码，当然你可以有很多的操作在这个函数中；
这里面的$这个号代表JQuery的意思 ，就是引用类库了。。。我是这么理解的；
3、JQuery的核心的一些方法
each(callback) '就像循环
$("Element").length; ‘元素的个数，是个属性
$("Element").size(); ’也是元素的个数，不过带括号是个方法
$("Element").get(); ‘某个元素在页面中的集合，以数组的形式存储
$("Element").get(index); ’功能和上面的相同，index表示第几个元素，数组的下标
$("Element").get().reverse(); ‘把得到的数组方向
$("Element1").index($("Element2")); ’元素2在元素1中的索引值是。。。
4、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦，但是他俩是可以转换滴)
$("*") ‘表示获取所有对象 但是我至今没这样用过
$("#XXX") ’获得 id=XXX 的元素对象（id可以是标签的id或CSS样式id） 常用
$("input[name='username']") 获得input标签中name='userName'的元素对象 常用
$(".abc") ' 获得样式class的名字是.abc的元素对象 常用
$("div") ' 标签选择器 选择所有的div元素 常用
$("#a,.b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素
$("#a .b p") 'ID号是a的并且使用了 b样式的 所有的p元素
示例：
<html>
<head>
<title>jquery测试</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.1.js"></script>
<style type="text/css">
.checkCss{
color:blue;
}
.redioCss{
color:red;
}
</style>
<script type="text/javascript">
$(function(){
// $("#XXX") 获得id=XXX的所有Jquery对象
$("#subt").click(function(){
// $("XXX") 获得XXX标签名的所有Jquery对象
alert("input 标签的对象个数为："+$("input").length);
// $("XXX[name='YYY']") 获得XXX标签名下name='YYY'的所有Jquery对象
// val()获得属性值
alert("name='userName'的输入框内容为："+$("input[name='userName']").val());
// 注意获得value值的第二种方式
alert("name='note'的输入框内容为："+$("input[name='note']").attr("value"));
alert("下拉菜单被选中项的文本为："+$("#sex option:selected").text());
alert("下拉菜单被选中项的值为："+$("#sex").val());
alert("复选框选中的个数为："+$("input[name='check']:checked").length);
if($("input[name='check']:checked").length>0){
var allCheckValue="";
var allCheckText="";
$("input[name='check']:checked").each(function(){
allCheckValue+=$(this).val()+" ";
allCheckText+=$(this).parent(".checkCss").text()+" ";
});
alert("复选框选中的文本为："+allCheckText+" 值为："+allCheckValue);
}
if($("input[name='status']:checked").length>0){
alert("单选框选中的文本为："+$("input[name='status']:checked").parent(".redioCss").text()+" 值为："+$("input[name='status']:checked").val());
}
});
});
</script>
</head>
<body>
姓名：<input type="text" name="userName" width="250"><br>
性别：<select id="sex" name="userSex" style="width: 155">
<option value="1">男</option>
<option value="2">女</option>
<option value="3">不男不女</option>
</select><br>
爱好：<span class="checkCss"><input type="checkbox" name="check" value="1">旅游</span>
<span class="checkCss"><input type="checkbox" name="check" value="2">音乐</span><br>
<span class="checkCss"><input type="checkbox" name="check" value="3">体育</span>
<span class="checkCss"><input type="checkbox" name="check" value="4">文学</span><br>
状态：<span class="redioCss"><input type="radio" name="status" value="1">在职</span>
<span class="redioCss"><input type="radio" name="status" value="2">离职</span><br>
简介：<input type="text" name="note" width="250"><br>
<input type="button" value="提交" id="subt"><br>
</body>
</html>
5、层级元素获取
$("Element1 Element2 Element3 ....") '前面父级 后面是子集
$("div > p") '获取div下面的所有的 p元素
$("div + p") 'div元素后面的第一个 p元素
$("div ~ p") 'div后面的所有的 p元素
6、简单对象获取
$("Element:first") 'HTML页面中某类元素的第一个元素
$("Element:last") 'HTML页面中某类元素的最后一个元素
$("Element:not(selector)") '去除所有与给定选择器匹配的元素,如：$("input:not(:checked)") 表示选择所有没有选中的复选框
$("Element:even") '获得偶数行
$("Element:odd“）'获得奇数行
$("Element:eq(index)") '取得一个给定的索引值
$("Element:gt(index)") '取得给定索引值的元素 之后的所有元素
$("Element:lt(index)") '取得给定索引值的元素 之前的所有元素
。。。
7、内容对象的获取和对象可见性
$("Element:contains(text)") '元素中是否包含text文本内容
$('Element:empty") '获得元素不包含子元素或文本的
$("Element:partnt") '获得元素包含子元素或文本的
$("Element:has(selector)") ‘是否包含某个元素， 如：$("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '选择所有可见元素
$("Element:visible") '选择所有不可见元素
8、其他对象获取方法
$("Element[id]") '所有带有ID属性的元素
$("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素
$("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素
$("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素
$("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素
$("Element[attribute *= youlika ]" '获得所有某个属性包含youlika的开头的元素
$("Element[selector1][selector2][....]") ’符合属性选择器，比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。
9、子元素的获取
$("Element:nth-child(index)") '选择父级下面的第n个元素
$("Element:nth-child(even)") '选择父级下面的偶数
$("Element:nth-child(odd)") '选择父级下面的奇数
$("Element:nth-child(3n+1)") '表达式
$("Element:first-child") '选择父级下面的第一个子元素
$("Element:last-child") '选择父级下面的最后一个子元素
$("Element:only-child") '匹配父级下的唯一的一个子级元素，例如dt在dl列表中唯一，那么将选择dt
10、表单对象获取
$(:input)//查找所有的Input元素，当然也包括下拉列表，文本域，单选框，复选框等。
$(:text)//匹配所有的单行文本框
$(:password)//匹配所有的密码框
$(:radio)//匹配所有的单选按钮
$(:checkbox)//匹配所有的复选框
$(:submit)//匹配所有的提交按钮
$(:image)//匹配所有的图像域，例如<input type="image" />
$(:reset)//匹配所有的重置按钮
$(:button)//匹配所有的按钮
$(:file)//匹配所有的文件上传域
$(:hidden)//匹配所有的不可见元素或者type为hidden的元素
$(:enabled)//匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)//匹配所有的不可用input元素，作用与上相反
$(:checked)//匹配所有选中的复选框元素
$(:selected)//匹配所有的下拉列表
11、元素属性的设置与移除
$("Element").attr(name) '取得第一个匹配的属性值，比如$("img").attr("src")
$("Element".attr(key,value)") '某一个元素设置属性
$("Element".attr({key:value,key1:value,....})) ‘为某个元素一次性设置多个属性
$("Element").attr(key,function) '为所有匹配的元素设置一个计算的属性值。
$("Element").removeAttr(name)//移除某一个属性
________________________________________________________________
Jquery:
1>attr()是获取或设置某个元素的属性。
<input type="text" name="userName" title="请输入用户名称！" >
例如：
获取输入框的title属性：$("input[name=userName]").attr("title");
设置输入框的title属性：$("input[name=userName]").attr("title","请输入姓名！");
function refresh() {
$("#randImg").attr("src","Rand?time="+ new Date().getTime());
}
<div>
<img src=”RandImag” id=”randImg”/>
</div>
使用jQuery的5种方法重写表单验证实例
之前在《eko对Ajax异步交互实现无刷新的理解》 这篇文章中，使用了Ajax的传统方法和AjaxGold框架2种方法实现了“可自动校验的表单”实例，今天eko使用jQuery的load()方 法、$.get()、$.post()、$.ajax()和表单插件（Form Plugin）5种方法分别重写“表单验证”实例(Ajax无刷新)，并且进一步说明中文乱码的问题（即编码和解码的问题）。与大家分享，呵呵~
如果对Ajax的传统方法和AjaxGold框架的方法，不是很理解，请阅读《eko对Ajax异步交互实现无刷新的理解》这篇文章。
使用jQuery的5种方法重写表单验证实例包下载
如果对下面的例子中的jQuery不感冒，请查看jQuery中文手册进行一一对照。下载地址
首先，对编码知识进行简要的说明，请务必理解后再看下面的代码喔!!
发送中文字符请求时，如果使用get方式，运行正常；而使用post方法则会出现乱码。这是由于异步对象XMLHttpRequest在处理返回的 responseText的时候，是按UTF-8编码进行解码的。如果你原来的网页编码是gb2312的话，当然会发生编码的冲突了；如果你原来的网页编 码是utf-8，那么就不会出现中文乱码的问题了。
出现了中文乱码该怎么办呢？通常的解决办法是用escape()对发送的数据进行编码，然后在返回的responseText上再用unescape() 进行解码。然而在JavaScript编程中通常不推荐使用escape()和unescape()，而推荐使用encodeURI()和 decodeURI()。请看下面的“表单验证实例”，或许对你学习编码知识有一定的帮助喔~
第一、jQuery的load(url,[data],[callback])方法
语法说明：url为异步请求的地址，data用来向服务器传送请求数据，为可选参数。一旦data参数启用，整个请求过程将以post的方式进行，否则默 认为get方式。如果希望在get方式下也传递数据，可以在url地址后面用类似“dataname1=data1& dataName2=data2”的方法。callback为Ajax加载成功后运行的回调函数。
另外使用load()方法返回的数据，不再需要考虑是文本还是XML，jQuery都会自动进行处理。
好了，下面马上使用load()方法实现“自动表单验证”实例。
首先是，html框架，5个例子都是一样的，如下：
<form>
用户昵称:<input type="text" οnblur="startCheck(this)" name="User" id="User"><span id="UserResult"></span><br />
输入密码:<input type="password" name="passwd1"><br />
确认密码:</td><td><input type="password" name="passwd2"><br />
<input type="submit" value="注册" class="button">
<input type="reset" value="重置" class="button">
</form>
必要说明：
1、οnblur="startCheck(this)" 这是JavaScript代码(简称js)
意思是text文本框失去焦点时触发自定义函数startCheck(),this是指代text文本框的值。
2、<span id="UserResult"></span>用来存放异步对象返回的结果。
jQuery代码如下：
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function startCheck(oInput){
//首先判断是否有输入，没有输入直接返回，并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格
var sUrl = "action.asp?user=" + oInput;
sUrl=encodeURI(sUrl); //使用encodeURI()编码，解决中文乱码问题
$("#UserResult").load(sUrl,function(data){
$("#UserResult").html(decodeURI(data)); //使用decodeURI()解码
}
);
}
</script>
必要说明：
1、使用jQuery时，都必须加载jquery.min.js文件，可以到http://jquery.com/官网下载最新的版本。
2、判断是否有输入时，用的全是JavaScript语法。
3、对传递给“处理页”的参数进行encodeURI编码，以解决中文乱码问题。
4、load()中的function函数是为了对返回结果进行decodeURI解码，以解决中文乱码问题。
5、对$.trim()、$("#UserResult")、html等jQuery语法不理解的，可以参考jQuery中文手册。本站提供下载。
action.asp处理页代码如下：
<%
if(Request("user")="eko") then
Response.Write "Sorry, " & Request("user") & " already exists."
else
Response.Write Request("user")&" is ok."
end if
%>
必要说明：
1、action.asp处理页的编码是GB2312，如果把"Sorry..already exists..is ik"等英文改为中文，请看下面的说明。
2、使用post方法会出现乱码，这是由于异步对象XMLHttpRequest在处理返回的responseText的时候，是按UTF-8编码进行解码的。
3、所以post方式的话，必须把action.asp页另存为时，第三项的编码由 ANST 改为 UTF-8 (请务必记住!!)
第二、使用$.get(url,[data],[callback])和$.post(url,[data],[callback])方法
语法说明：尽管load()方法可以实现get和post两种方式，但很多时候开发者还是希望能够指定发送方式，并且处理服务器返回的值。jQuery提 供了$.get()和$.post()两种方法，分别针对这两种请求方式。其中，url为请求地址，data为请求数据的列表，是可选参 数，callback为请求成功后的回调函数，该函数接受两个参数，第一个参数为服务器返回的数据，第二个参数为服务器的状态，是可选参 数。$.post()中的type为请求数据的类型，可以是html、xml、json等。
“可自动校验表单实例”的jQuery代码如下，html如上所述。
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
var username=$("#User").val();
//组合成对象的形式
var queryString={user:username};
return queryString;
}
function startCheck(oInput){
//首先判断是否有输入，没有输入直接返回，并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格
$.get("action.asp",createQueryString(),
function(data){
$("#UserResult").html(data);
});
}
</script>
必要说明：
1、对$.trim()、$("#UserResult")、html、val()等jQuery语法不理解的，可以参考jQuery中文手册。本站提供下载。
2、自定义函数createQueryString()，是对传入“处理页”的参数，进行处理。一种常规的方法。
3、因为是以get方式处理，说明这里不需要进行编码和解码。下面以post方式处理，则需要编码和解码了，代码如下
function createQueryString(){
//使用encodeURI()编码解决中文乱码问题
var username=encodeURI($("#User").val());
//组合成对象的形式
var queryString={user:username};
return queryString;
}
function startCheck(oInput){
//首先判断是否有输入，没有输入直接返回，并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格
$.post("action.asp",createQueryString(),
function(data){
$("#UserResult").html(decodeURI(data));
});
}
</script>
第三、使用$.ajax()方法
语法说明：尽管load()、$.get()和$.post()非常方便实用，但却不能控制错误和很多交互的细节，可以说这3种方法对Ajax的可控性较 差。jQuery提供了一个强大的函数$.ajax(options)来设置Ajax访问服务器的各个细节，它的语法十分简单，就是设置Ajax的各个选 项，然后指定相应的值。“可自动校验表单”实例代码如下：
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
//使用encodeURI()编码解决中文乱码问题
var username=encodeURI($("#User").val());
//组合成对象的形式
var queryString={user:username};
return queryString;
}
function startCheck(oInput){
//首先判断是否有输入，没有输入直接返回，并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格
$.ajax({
type: "GET",
url: "action.asp",
data: createQueryString(),
success: function(data){
$("#UserResult").html(decodeURI(data));
}
});
}
</script>
必要说明：
1、代码基本同上，只是$.ajax(options)稍有不同，对于其参数不理解可以参考jQuery中文手册。
2、给个建议，无论是get方式还是post方式，都习惯进行编码，以防出现中文乱码的问题。
3、再强调一下，无论使用哪种程序，如果遇到问题了，都可以参考相关的手册说明，这是建站所必需的。
上面的实例使用了jQuery的load()方法、$.get()、$.post()、$.ajax()的4种方法，都要考虑中文乱码的问题，下面推荐一个方法，进一步简化jQuery代码，呵呵。
第四、表单插件
表单插件（Form Plugin）是一款功能非常强大的插件，在jQuery官方网站上目前为4星级推荐，可以在http://plugins.jquery.com/project/form找到相关资料，下载后为jquery.form.js文件。该插件提供获取表单数据、重置表单项目、使用Ajax提交数据等一系列功能，深受开发人员的喜爱。
使用表单插件，再次重写“表单校验实例”，完整代码如下：
<form id="myform" action="action.asp">
用户昵称:<input type="text" οnblur="startCheck(this)" name="User" id="User"><input type="button" value="检 查" class="button"><span id="UserResult"></span><br />
输入密码:<input type="password" name="passwd1"><br />
确认密码:</td><td><input type="password" name="passwd2"><br /><br />
<input type="submit" value="注册" class="button"><input type="reset" value="重置" class="button">
</form>
html框架加了一个“检查”的按钮(使用手动校验的方法)，jQuery如下：
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" src="jquery.form.js"></script>
<script language="javascript">
function startCheck(oInput){
//首先判断是否有输入，没有输入直接返回，并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
}
$(function(){
$("input[type=button]").click(function(){
var options={
target: "#UserResult"
};
//表单的Ajax化
$("#myform").ajaxSubmit(options);
});
});
</script>
必要说明：
1、使用表单插件，必须加载jquery.form.js文件。
2、按Ajax方式提交数据，可以使用表单插件的ajaxSubmit(options)来按照Ajax的方式直接提交表单或者使用 ajaxform(options)方法，通常在页面加载完成时执行，用来将表单统一Ajax化，并且提交表单依然使用传统的submit按钮，只不过进 行的是Ajax提交。其中参数options与$.ajax(options)的参数基本相同，可以参考jQuery手册。
jquery JSON的解析方式
文章分类:Java编程
第一次用JSON作为jquery异步请求的传输对象，结果在jquery请求后返回的结果是字符串还是json对象上折腾了半天。等到问题解决了，也大致明白怎么个意思了，归根结底还是对jquery对相关json对象获取的理解有所偏差。
-
-
这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。
这里首先给出JSON字符串集，字符串集如下：
复制代码 代码如下:
var data="
{
root:
[
{name:'1',value:'0'},
{name:'6101',value:'西安市'},
{name:'6102',value:'铜川市'},
{name:'6103',value:'宝鸡市'},
{name:'6104',value:'咸阳市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'汉中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
]
}";
这里以jquery异步获取的数据类型——json对象和字符串为依据，分别介绍两种方式获取到的结果处理方式。
1.对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明：
var dataObj=eval("("+data+")");//转换为json对象
alert(dataObj.root.length);//输出root的子对象数量
$.each(dataObj.root,fucntion(idx,item){
if(idx==0){
return true;
}
//输出每个root子对象的名称和值
alert("name:"+item.name+",value:"+item.value);
})
注：对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变。
2. 对于服务器返回的JSON字符串，如果jquery异步请求将type（一般为这个配置属性）设为“json”，或者利用$.getJSON()方法获得 服务器返回，那么就不需要eval（）方法了，因为这时候得到的结果已经是json对象了，只需直接调用该对象即可，这里以$.getJSON方法为例说 明数据处理方法：
$.getJSON("http://gaoyusi.blog.163.com/",{param:"gaoyusi"},function(data){
//此处返回的data已经是json对象
//以下其他操作同第一种情况
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue，返回false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});
第一步：创建 名为"ajax" 的 Java Web项目。
第二步：加入struts2的jar包，这里需要四个包 freemarker.jar ognl.jar struts2-core.jar commons-fileupload.jar commons-io.jar xwork-core-2.1.6.jar（这个包加上版本号，是因为下文要提到它），这六个包是struts必须依赖的jar包，什么好说的。
第三步：修改 web.xml 加入 struts的过滤器，代码如下：
view plaincopy to clipboardprint?
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
第四步：加入json的包，这里需要两个：json-lib.jar jsonplugin.jar 这里要注意很重要的一点，因为json大量引用了Apache commons的包，所以这里要一并加入，需要的commons包共4个，除了commons的包外，还需要引入一个 ezmorph的包，所以这一步一共要引入7个包，列出如下：commons-collections.jar commons-lang.jar commons-beanutils.jar commons-logging.jar ezmorph.jar 再加上json的两个包共七个，一次性加入。
第五步：写后台处理AjaxLoginAction.action，内容如下：
view plaincopy to clipboardprint?
package qy.test.action;
import java.util.HashMap;
import java.util.Map;
import net.sf.json.JSONObject;
import com.opensymphony.xwork2.ActionSupport;
public class AjaxLoginAction extends ActionSupport {
// 用户Ajax返回数据
private String result;
// struts的属性驱动模式，自动填充页面的属性到这里
private String loginName;
private String password;
@Override
public String execute() {
// 用一个Map做例子
Map<String, String> map = new HashMap<String, String>();
// 为map添加一条数据，记录一下页面传过来loginName
map.put("name", this.loginName);
// 将要返回的map对象进行json处理
JSONObject jo = JSONObject.fromObject(map);
// 调用json对象的toString方法转换为字符串然后赋值给result
this.result = jo.toString();
// 可以测试一下result
System.out.println(this.result);
return SUCCESS;
}
//getter setter 方法省略
}
package qy.test.action;
import java.util.HashMap;
import java.util.Map;
import net.sf.json.JSONObject;
import com.opensymphony.xwork2.ActionSupport;
public class AjaxLoginAction extends ActionSupport {
// 用户Ajax返回数据
private String result;
// struts的属性驱动模式，自动填充页面的属性到这里
private String loginName;
private String password;
@Override
public String execute() {
// 用一个Map做例子
Map<String, String> map = new HashMap<String, String>();
// 为map添加一条数据，记录一下页面传过来loginName
map.put("name", this.loginName);
// 将要返回的map对象进行json处理
JSONObject jo = JSONObject.fromObject(map);
// 调用json对象的toString方法转换为字符串然后赋值给result
this.result = jo.toString();
// 可以测试一下result
System.out.println(this.result);
return SUCCESS;
}
//getter setter 方法省略
}
第六步：写前台index.jsp，注意加入 jquery的js文件 内容如下：
view plaincopy to clipboardprint?
<%@ 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">
<mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready( function() {
//使用 Ajax 的方式 判断登录
$("#btn_login").click( function() {
var url = 'ajaxLogin.action';
alert("===");
//获取表单值，并以json的数据形式保存到params中
var params = {
loginName:$("#loginName").val(),
password:$("#password").val(),
}
//使用$.post方式
$.post(
url, //服务器要接受的url
params, //传递的参数
function cbf(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
//alert(data);
var member = eval("("+data+")"); //包数据解析为json 格式
$('#result').html("欢迎您： "+member.name);
},
'json' //数据传递的类型 json
);
});
});
// --></mce:script>
</head>
<body>
<span>用户名：</span>
<input type="text" id="loginName" name="loginName">
<br />
<span>密码：</span>
<input type="password" name="password" id="password">
<br />
<input type="button" id="btn_login" value="Login" />
<p>
这里显示ajax信息：
<br />
<span id="result"></span>
</p>
</body>
</html>
<%@ 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">
<mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready( function() {
//使用 Ajax 的方式 判断登录
$("#btn_login").click( function() {
var url = 'ajaxLogin.action';
alert("===");
//获取表单值，并以json的数据形式保存到params中
var params = {
loginName:$("#loginName").val(),
password:$("#password").val(),
}
//使用$.post方式
$.post(
url, //服务器要接受的url
params, //传递的参数
function cbf(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
//alert(data);
var member = eval("("+data+")"); //包数据解析为json 格式
$('#result').html("欢迎您： "+member.name);
},
'json' //数据传递的类型 json
);
});
});
// --></mce:script>
</head>
<body>
<span>用户名：</span>
<input type="text" id="loginName" name="loginName">
<br />
<span>密码：</span>
<input type="password" name="password" id="password">
<br />
<input type="button" id="btn_login" value="Login" />
<p>
这里显示ajax信息：
<br />
<span id="result"></span>
</p>
</body>
</html>
第七步：在src目录下加入struts.xml，并配置相应的xml文件，为ajax请求提供数据。代码如下：
view plaincopy to clipboardprint?
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="ajax" extends="json-default">
<action name="ajaxLogin" class="qy.test.action.AjaxLoginAction">
<!-- 返回类型为json 在sjon-default中定义 -->
<result type="json">
<!-- root的值对应要返回的值的属性 -->
<!-- 这里的result值即是 对应action中的 result -->
<param name="root">result</param>
</result>
</action>
</package>
</struts>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="ajax" extends="json-default">
<action name="ajaxLogin" class="qy.test.action.AjaxLoginAction">
<!-- 返回类型为json 在sjon-default中定义 -->
<result type="json">
<!-- root的值对应要返回的值的属性 -->
<!-- 这里的result值即是 对应action中的 result -->
<param name="root">result</param>
</result>
</action>
</package>
</struts>
第八步：如果第四步没有加入commons-logging.jar包，这里要记得加入
第九步：发布运行。很不幸，你会发现一个错误，
java.lang.ClassNotFoundException: com.opensymphony.xwork2.util.TextUtils:
这是struts的版本错误，因为用的xwork2.1.6-core.jar中不存在TextUtils类，这里把 xwork2.1.2-core.jar也加到classpath中，xwork2.1.2-core.jar中包含这个东西，我们用的是 xwork2.1.6的jar，当要用到TextUtils时，就去xwork2.1.2-core.jar中找。
来自: http://hi.baidu.com/lf0927/blog/item/4a33f4f2a80ce7c00b46e075.html
基于jQuery的AJAX和JSON实现纯html数据模板
通过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。
我们先来看一下html模板：
<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
<tr>
<th>
订单ID</th>
<th>
客户ID</th>
<th>
雇员ID</th>
<th>
订购日期</th>
<th>
发货日期</th>
<th>
货主名称</th>
<th>
货主地址</th>
<th>
货主城市</th>
<th>
更多信息</th>
</tr>
<tr id="template">
<td id="OrderID">
</td>
<td id="CustomerID">
</td>
<td id="EmployeeID">
</td>
<td id="OrderDate">
</td>
<td id="ShippedDate">
</td>
<td id="ShippedName">
</td>
<td id="ShippedAddress">
</td>
<td id="ShippedCity">
</td>
<td id="more">
</td>
</tr>
</table>
一定要注意的就是里面所有的id属性，这个是一个关键。再来看一下AJAX请求和绑定数据的代码。
$.ajax(...{
type: "get",//使用get方法访问后台
dataType: "json",//返回json格式的数据
url: "BackHandler.ashx",//要访问的后台地址
data: "pageIndex=" + pageIndex,//要发送的数据
complete :function()...{$("#load").hide();},//AJAX请求完成时隐藏loading提示
success: function(msg)...{//msg为返回的数据，在这里做数据绑定
var data = msg.table;
$.each(data, function(i, n)...{
var row = $("#template").clone();
row.find("#OrderID").text(n.订单ID);
row.find("#CustomerID").text(n.客户ID);
row.find("#EmployeeID").text(n.雇员ID);
row.find("#OrderDate").text(ChangeDate(n.订购日期));
if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期));
row.find("#ShippedName").text(n.货主名称);
row.find("#ShippedAddress").text(n.货主地址);
row.find("#ShippedCity").text(n.货主城市);
row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>");
row.attr("id","ready");//改变绑定好数据的行的id
row.appendTo("#datas");//添加到模板的容器中
});
这个是jQuery的AJAX方法，返回数据并不复杂，主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个“var row = $("#template").clone();”先把模板复制一份，接下来row.find("#OrderID").text(n.订单ID);，表 示找到id=OrderID的标记，设置它的innerText为相应的数据，当然也可以设置为html格式的数据。或者是通过外部的函数把数据转换成需 要的格式，比如这里row.find("#OrderDate").text(ChangeDate(n.订购日期));有点服务器控件做模板绑定数据的 感觉。
所有的这些，都是放在一个静态的页面里，只通过AJAX方法从后台获取数据，所有html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test1</title>
<script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script>
<script language="javascript" type="text/javascript" src="js/PageDate.js"></script>
</head>
<body>
<div>
<div>
<br />
<input id="first" type="button" value=" << " /><input id="previous" type="button"
value=" < " /><input id="next" type="button" value=" > " /><input id="last" type="button"
value=" >> " />
<span id="pageinfo"></span>
<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
<tr>
<th>
订单ID</th>
<th>
客户ID</th>
<th>
雇员ID</th>
<th>
订购日期</th>
<th>
发货日期</th>
<th>
货主名称</th>
<th>
货主地址</th>
<th>
货主城市</th>
<th>
更多信息</th>
</tr>
<tr id="template">
<td id="OrderID">
</td>
<td id="CustomerID">
</td>
<td id="EmployeeID">
</td>
<td id="OrderDate">
</td>
<td id="ShippedDate">
</td>
<td id="ShippedName">
</td>
<td id="ShippedAddress">
</td>
<td id="ShippedCity">
</td>
<td id="more">
</td>
</tr>
</table>
</div>
<div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
LOADING....
</div>
<input type="hidden" id="pagecount" />
</div>
</body>
</html>
PageData.js就是包括上面AJAX请求和绑定数据代码的js，整个页面连form都不用，这样做有什么好处呢。再看下面一个模板
<ul id="datas">
<li id="template">
<span id="OrderID">
fsdfasdf
</span>
<span id="CustomerID">
</span>
<span id="EmployeeID">
</span>
<span id="OrderDate">
</span>
<span id="ShippedDate">
</span>
<span id="ShippedName">
</span>
<span id="ShippedAddress">
</span>
<span id="ShippedCity">
</span>
<span id="more">
</span>
</li>
</ul>
还是要注意id属性。大家看到这里应该明白了，不管用什么样的表现形式，只要id属性相同，就可以把数据绑定到对应的位置。这样的话，我们这些做程序的就 不会因为美工的修改而修改代码了，而且美工也只要做出html就可以了，不需要为服务器控件做模板（不过我还没遇到过这样的美工，都是美工设计好了我来改 成服务器控件的模板）。
再简单说一下AJAX请求的后台，用的是Access的Northwind数据库，把订单表放到DataTable里，然后通过DataTable2JSON（http://blog.csdn.net/luq885/archive/2007/06/05/1639853.aspx）转化成JSON数据格式传回来就完了，不过后台用了一些分页和缓存的方法，希望对初学者有一些帮助。
全部例子到http://www1.51ok.com/down.do?7A5EFE8D0FD43CDF61D8980635F8708A下载，其中test.htm是用table模板实现的，test2.htm是用ul模板实现的。效果如下：
<html>
<head>
<title>jQuery Ajax 实例演示</title>
</head>
<script src="./js/jquery.js" type="text/java script"></script>
<script type="text/java script">
$(document).ready(function(){//这个就是jQueryready ，它就像C语言的main 所有操作包含在它里面
$("#button_login").mousedown(function(){
login(); //点击ID为"button_login"的按钮后触发函数 login();
});
});
function login(){ //函数 login();
var username = $("#username").val();//取框中的用户名
var password = $("#password").val();//取框中的密码
$.ajax({ //一个Ajax过程
type: "post", //以post方式与后台沟通
url : "login.php", //与此php页面沟通
dataType:'json',//从php返回的值以 JSON方式 解释
data: 'username='+username+'&password='+password, //发给php的数据有两项，分别是上面传来的u和p
success: function(json){//如果调用php成功
//alert(json.username+'\n'+json.password); //把php中的返回值（json.username）给 alert出来
$('#result').html("姓名:" + json.username + "<br/>密码:" + json.password); //把php中的返回值显示在预定义的result
定位符位置
—————————————————————————————————
struts2,jquery,ajax实现无刷新登录
1. action：
/**
* 会员登录
*/
public String login() {
try {
Object object = memberinfoManager.validate(memberinfoPO);
if (object == null) {
message = "failure";
} else {
memberinfoPO = (MemberinfoPO) object;
Map<String, Object> session = ServletActionContext.getContext()
.getSession();
session.put("memberinfoPO", memberinfoPO);
// 登录成功以后显示信息
String s = "";
if (memberinfoPO.getSex().equals("男")) {
s = "先生";
} else {
s = "女士";
}
message = memberinfoPO.getUsername()
+ s + " "
+ "欢迎您登录 | <a href='#'>进入会员中心</a> | & lt;a href='javascript:logout()'>退出登录</a>";
}
} catch (Exception e) {
logger.error(e.toString(), e);
}
return SUCCESS;
}
/**
* 退出登录
*/
public String loginOut() {
try {
ServletActionContext.getContext().getSession().remove("memberinfoPO");
} catch (Exception e) {
logger.error(e.toString(),e);
}
return SUCCESS;
}
2 struts.xml
<result type="json">
<param name="excludeProperties">logger,memberinfoManager,organizationpos,menuUtil
,organizationListMap,typeop,typeDao</param>
</result>
3.jsp
<s:if test="#session.memberinfoPO == null">
<div id="loginResult"></div>
<div id="loginForm">
用户名 <input type="text" name="memberinfoPO.loginname" id="username" /> 密码：
<input type="password" name="memberinfoPO.loginpass" id="password" />
<input type="checkbox" name="checkbox" value="checkbox" />
自动登录
<input type="submit" value="登录" οnclick="userLogin()"/>
免费注册
欢迎登录交通物流信息平台
</div>
</s:if>
<s:else>
<s:set value="#session.memberinfoPO" var="member" />
<div id="loginResult">
<s:property value="#member.username"/><s:if test='#member.sex == "男"'>先生</s:if><s:else>女士</s:else>
欢迎您登录 | <a href='#'>进入会员中心</a> | & lt;a href='javascript:logout()'>退出登录</a>
</div>
<div id="loginForm" style="display: none;">
用户名 <input type="text" name="memberinfoPO.loginname" id="username" /> 密码：
<input type="password" name="memberinfoPO.loginpass" id="password" />
<input type="checkbox" name="checkbox" value="checkbox" />
自动登录
<input type="submit" value="登录" οnclick="userLogin()"/>
免费注册
欢迎登录交通物流信息平台
</div>
</s:else>
4.js
function userLogin() {
var username = $("#username").val();
var password = $("#password").val();
if (username == "" || username == null) {
alert("请输入用户名！");
} else if (password == "" || password == null) {
alert("请输入密码！");
} else {
$.ajax( {
url :"memberinfo/memberinfo_login",
type :"post",
dataType :"json",
data :"memberinfoPO.loginname=" + username
+ "&memberinfoPO.loginpass=" + password,
timeout :20000,// 设置请求超时时间（毫秒）。
error : function() {// 请求失败时调用函数。
$("#loginResult").html("请求失败!");
},
success :callbackLogin
});
}
}
function callbackLogin(json) {
$("#loginForm").hide();
if (json.message == 'failure') {
$("#loginResult").html("用户名或密码错误！<a href='javascript:loginAgain()'>请重新登录</a>");
$("#loginResult").show();
} else {
alert("登录成功！");
$("#loginResult").html(json.message);
$("#loginResult").show();
}
}
function loginAgain() {
$("#loginResult").hide();
$("#loginForm").show();
}
function logout() {
$.ajax( {
url :"memberinfo/memberinfo_loginOut",
type :"post",
dataType :"json",
timeout :20000,// 设置请求超时时间（毫秒）。
error : function() {// 请求失败时调用函数。
$("#loginResult").html("请求失败!");
},
success :callbackLoginOut
});
}
function callbackLoginOut() {
$("#loginResult").hide();
$("#loginForm").show();
}
5,
将jquery.js,json-lib-2.1.jar,struts2-json-plugin-2.1.8.1.jar
}
});
//$.post()方式：
$('#test_post').mousedown(function (){
$.post(
'login.php',
{
username:$('#username').val(),
password:$('#password').val()
},
function (data) //回传函数
{
var myjson='';
eval('myjson=' + data + ';');
$('#result').html("姓名1:" + myjson.username + "<br/>密码1:" + myjson.password);
}
);
});
//$.get()方式：
$('#test_get').mousedown(function ()
{
$.get(
'login.php',
{
username:$('#username').val(),
password:$('#password').val()
},
function(data) //回传函数
{
var myjson='';
eval("myjson=" + data + ";");
$('#result').html("姓名2:" + myjson.username + "<br/>密码2:" + myjson.password);
}
);
});
}
</script>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
<p><span>输入姓名:</span><input type="text" name="username" id="username" /></p>
<p><span>输入密码:</span><input type="text" name="password" id="password" /></p>
</form>
<button id="button_login">ajax提交</button>
<button id="test_post">post提交</button>
<button id="test_get">get提交</button>
</body>
</html>
Struts 2+Jquery+JSON（登录验证）
JSON 2010-08-02 16:47:39 阅读658 评论3 字号：大中小 订阅
网上有许多关于Struts2与JSON的文章，Google加百度，查阅了许多，有各种各样的做法。其中，大部分的文章都说要加进一个叫 jsonplugin的插件，在Google Code可以下载。以前我有做过测试，也是用它，但着实麻烦，要让Struts2的package继承一个叫“json-default”的父 package。网上的文章，大部分都是说从Struts的Action如何把JSON数据发送回浏览器端（Ajax），而我想要一个跟它们相反的过程 （即从Ajax端发送数据到服务器端的Action并解析出来），却找不到合适的答案。摸索了三个晚上，未果。今天终于让我找到了思路。
其中，不管是从浏览器端（JS，Ajax，Jquery等）发送给服务器端，还是从服务器端（Struts的Action，Servlet等）发送回客户端，都要识别一点：发送的都应该是JSON格式的字符串。
下面，我们先来重写登录模块中的loginform.jsp文件，原来的代码，请看Struts 2.1.6 精简实例系列教程(2)：用户登录模块的实现，现在修改的代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!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>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
var loginName1 = $("input[name='loginName']").val(); //获取账号
var password1 = $("input[name='password']").val(); //获取密码
var jsonUser = {loginName:loginName1, password:password1}; //JSON对象
//注意:jsonUser.toString()这种方法错误,javaScript中的toString是用于布尔型变量的,而应用以下方法
var strUser = JSON.stringify(jsonUser); //将JSON对象转变成JSON格式的字符串,
$.post("user/login.action", {json: strUser}, callback, "json");
});
function callback(json){
alert(json.msg); //显示反馈信息
if(json.suc == 1){ //如果返回"登录成功"
window.location.href = "admin/index.action"; //跳转到后台主页
}
}
});
</script>
</head>
<body>
<form action="user/login.action" method="post">
账号<input type="text" name="loginName"/><br/>
密码<input type="password" name="password"><br/>
<input type="button" id="submit" value="登录"/>
</form>
</body>
</html>
关键的两句是：
var jsonUser = {loginName:loginName1, password:password1}; (1)
var strUser = JSON.stringify(jsonUser); (2)
第（1）句是组装JSON对象，关于JSON对象的格式，建议大家到http://www.json.org/网站上学习一下，要验证你写的 JSON对象是否正确，可在http://json.bloople.net/网站上验证。上面写的JSON对象其实是非常简单的一种，jsonUser 对象里有两个属性，分别是loginName和password，而表示这两个属性，用key-value的形式，loginName1和 password1分别是接收表单中的账号、密码的值。
第（2）句，相当重要，通过JavaScript内置对象JSON的stringify方法，将JSON对象转换成字符串。因为，我们传送给服务器端的要是JSON格式的字符串。
$.post("login!valid.action", {json: strUser}, callback, "json");
这一句，Jquery用POST方法向服务器端发送数据，login!valid.action是我们要发送到的目的URI，也即直达 loginAction的valid方法。而{…}是我们要发送的数据（data），{json:strUser}，其实也是一个JSON对 象，Key：value的形式，大家注意，我们把strUser这个json串发过去，在Action那里接收时，要接收“json”这个变量，这个变量 的值就是我们发送的strUser字符串。
回调函数（callback）是指服务器端成功发回时，在JS端执行的函数。最后一个参数“json”是返回数据类型的一种，另外，还有”text”、“xml”等。而function callback函数体的内容，大家看完LoginAction类后，自然会明白。
好，Show一下修改后的LoginAction.java，代码如下：
package cn.simple.action;
import java.io.IOException;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import org.json.JSONObject;
import cn.simple.pojo.User;
import com.opensymphony.xwork2.ActionSupport;
//@Results({
// @Result(name="success", location="admin/index.action", type="redirect"),
// @Result(name="input", location="loginform.jsp", type="dispatcher")
//})
public class LoginAction extends ActionSupport {
private String json; //JSON字符串,JS与Action传递数据的载体
public String getJson() {
return json;
}
public void setJson(String json) {
this.json = json;
}
/** *//**
* 登录验证
* @throws Exception
*/
public void valid() throws Exception {
JSONObject jsonObj = new JSONObject(json); //将JSON格式的字符串构造成JSON对象
String loginName = jsonObj.getString("loginName"); //获取JSON对象中的loginName属性的值
String password = jsonObj.getString("password"); //获取JSON对象中的password属性的值
if(loginName=="yutong"){
//此时的JSON对象,有两个属性suc和msg,其中suc表示是否登录成功的状态
json = "{suc:0, msg:'用户名不存在'}"; //构造JSON格式的字符串
} else if( ! password.equals("123")){
json = "{suc:0, msg:'密码不正确!'}";
} else {
json = "{suc:1, msg:'登录成功!'}";
}
sendMsg(json); //发送JSON格式的字符串回JS端
}
/** *//**
* 向客户端的JS发送字符串
* @param content 发送的内容
* @throws IOException
*/
public void sendMsg(String content) throws IOException{
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.getWriter().write(content);
}
}
我们说过了，JS与Action互相传送的是JSON格式的字符串，故在LoginAction里，我们定义了private String json这个成员属性及其getter和setter方法。
或者，打成jar包，放到项目lib目录下。我们就可以使用JSON类库提供给我们的方法了。
网上有另一个JSON的类库：json-lib，大家也可下载使用一下，不过，它要引进几个其他的jar包，详细请见http://json- lib.sourceforge.net/。个人使用它的感受，也真有点郁闷，测试它时，想找一个从JSON字符串转换成JSON对象的方法，找了半天也 没找到。不过，它对Java的Bean,Map,List等与JSONObject的互转换做得还好。
sendMsg方法，是从Struts的Action中调用回原生Servlet的response来向浏览器端发送数据。
还有一点，大家应该注意到，我们在LoginAction中写的valid方法返回类型是void型的，跟我们以前做的返回 “success”、”input”之类的String类型不同。当我们通过 “!valid”来方法它时，它不作跳转，而是像我们平时Servlet中那种直接显示HTML类似。这一点达成了Ajax与Struts的成功交互。而 网上许多写jsonplugin插件使用的文章，所调用的方法都是返回String类型，然后，再来个<result type=”json”>，那样感觉挺麻烦的，不如直接让Ajax发来的请求与void类型的方法交互，不直接爽快？
好，让我们运行一下，看看效果吧：
大家看看fireFox的debug的控制台中显示的：
好，我们来输入一个正确的账号和密码，如下：
点确定后，网页就跳到了后台主页。
这样，Ajax(Jquery)与Struts2.1.6的交互，通过JSON格式的字符串传递数据，这一实践就完成了。有一点需要说明一下：本例 中的JSON对象都是相对比较简单，还有一些复杂的JSON对象，如{company:{building:”五角大楼”，employees： [{name:”tom”,age:21},{name:”marry”,age:18} ] } }。至于这些，该怎么处理呢？其实，处理方法也一样的。只是在Action中调用JSON类库的一些对象和方法，就能很好地处理。
关于Struts2,JSON,Jquery的话题，我们会在Struts2.1.6精简实例系列教程之外，继续讨论。
function add(){
windows.location.href="articleedit.do";
}
function search()
{
var m=document.AnythingTypeForm;
m.initial.value=true;
m.submit();
}
function add()
{ alert("sdf");
var=articleedit.do
document.location.href=url;
}
function edit()
{
var m=document.AnythingTypeForm;
if(isCheck(m.refID))
{
var idList=choose(m,'refID');
var id=getFirstID(idList);
var url=m.action+"?method=edit&classId="+id;
if(idList.indexOf(",")!=-1)
{
if(window.confirm("你选择了多个类别,系统将只对你选择的第一个类别进行修改!"))
document.location.href=url;
}
else
document.location.href=url;
}
else
{
alert("你必须选中一项进行此操作!!");
return false;
}
}
function del()
{
var m=document.AnythingTypeForm;
if( m.refID==null) return;
if(isCheck(m.refID))
{
if(window.confirm("您确定要删除选中的类别吗？"))
{
m.method.value='delete';
m.target="_self"
m.submit();
}
else
return false;
}
else
{
alert("你必须至少选中一项进行此操作!!");
return false;
}
}
function getFirstID(idList) {
var id;
var iLop = idList.indexOf(",");
if (iLop != -1)
{
id = idList.substring(0, iLop);
}
else
{
id = idList;
}
return id;
}
function TCheckBox(sBoxName,flag)
{
var j = 0;
var i = 0;
var tChecked;
var idList=choose(m,'refID');
var id=getFirstID(idList);
var url=m.action+"?method=edit&classId="+id;
if (sBoxName.length> 1) {
for(i=0;i <=sBoxName.length-1;i++){
if(sBoxName(i).checked){
j=j+1;
tChecked = i;
}
}
}
else {
if (sBoxName.checked){
j=1;
tChecked = 1;
}
}
if (j==0){
alert( "您没有选择记录，请选择记录 ");
return false;
}
if (j> 1){
alert( "您选择了多条记录，请只选一条记录 ");
return false;
}
按照一、二楼的方法，使用一个timestamp 字段，并设置其默认值为CURRENT_TIMESTAMP 即可。
________________________________________________