JQERY 大全

rainyear

浏览: 370217 次
性别:
来自: Alien

最近访客更多访客>>

沐刃青蛟

chexiaorui-db2

yusip

hxgdragon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS,JQUERY和CSS

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" onblur="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、onblur="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" onblur="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"></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"></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">


<result type="json">



<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">
　　 
<result type="json">
　　 

<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="登录" onclick="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="登录" onclick="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 即可。

________________________________________________

分享到：

JQERY 和窗口居中 | JS的document 详细学习

2011-09-07 10:29
浏览 2779
评论(0)
分类:非技术
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQERY 大全

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQERY 大全

评论

发表评论

相关推荐

JQUERY 常用方法总结

刷新物化视图和查看子类四级分类

JS处理特殊字符

不能执行已释放 Script 的代码解块方案

JQUERY 复制table

要过滤的字符

JQERY 和窗口居中

JS的document 详细学习

JQERY

最近访客更多访客>>