当前位置: 代码迷 >> 综合 >> JQERY 大全
  详细解决方案

JQERY 大全

热度:51   发布时间:2023-12-08 01:12:34.0
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>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <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+">&nbsp;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>
        &nbsp;<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=" >> " />
            &nbsp;<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 + "&nbsp;"
       + "欢迎您登录&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;<a href='#'>进入会员中心</a>&nbsp;&nbsp;|&nbsp;&nbsp;& 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" />   &nbsp; &nbsp; 密码:
     <input type="password" name="memberinfoPO.loginpass" id="password" />
    
     <input type="checkbox" name="checkbox" value="checkbox" />
     自动登录
     <input type="submit"   value="登录" οnclick="userLogin()"/>
     &nbsp; &nbsp; 免费注册
     &nbsp; &nbsp; &nbsp; &nbsp; 欢迎登录交通物流信息平台
</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>
   欢迎您登录&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;<a href='#'>进入会员中心</a>&nbsp;&nbsp;|&nbsp;&nbsp;& lt;a href='javascript:logout()'>退出登录</a>
</div>
<div id="loginForm" style="display: none;">
   用户名 <input type="text" name="memberinfoPO.loginname" id="username" />   &nbsp; &nbsp; 密码:
     <input type="password" name="memberinfoPO.loginpass" id="password" />
    
     <input type="checkbox" name="checkbox" value="checkbox" />
     自动登录
     <input type="submit"   value="登录" οnclick="userLogin()"/>
     &nbsp; &nbsp; 免费注册
     &nbsp; &nbsp; &nbsp; &nbsp; 欢迎登录交通物流信息平台
</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 即可。

________________________________________________