jquery+js+struts
http://www.myexception.cn/ajax/959683.html
jquery ajax 小例子
1、首先是jsp页面 (ajax 提交的数据以键值对的形式)
<script language="javascript" src=\'#\'" /js/jquery.js"></script>
<script type="text/javascript">
function tosubmit(){
$.post("login.action", {userName:"John",password:"123456"} );
}
</script>
<form name="loginForm" action="login.action" method="post">
<input type="button" value="登录"/>
</form>
因为使用的是 jquery ajax 请求，因此首先需要引用 jquery.js。
本例使用 jquery ajax 的 post 提交，因此需要使用 $.post() 方法。
此方法的第一个参数 url：待载入页面的URL地址(可以是.jsp或.do或.action)。
此方法的第二个参数 data (可选)：待发送 Key/value 参数。以struts2为例，在action中需要有对应key的属性值，及set和get方法。此 data 是用 {} 括起来的，以 key:value 的形式表现的，如果是多个键值对，则以分号分隔开。
此方法的第三个参数 callback(可选)：载入成功时的回调函数。
此方法的第四个参数 callback(可选)：返回内容格式，xml, html, script, json, text, _default。
2、以 struts2 为例：
public class HelloWorld extends ActionSupport {
private static final long serialVersionUID = -1909952087423834225L;
private String userName;
private String password;
public String execute() throws Exception {
//userName:John, password:123456
System.out.println("userName:"+userName+", password:"+password);
return "LIST";
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
首先需要有跟jsp页面上匹配ajax传过来的属性名：userName, password。并且需要有此属性的set和get方法。
输出结果：userName:John, password:123456
可见，在action中得到了从jsp页面通过ajax请求过来的两个属性userName, password的值：John, 123456
3、jsp页面 (ajax 提交的数据以序列化的形式)
<script language="javascript" src=\'#\'" /js/jquery.js"></script>
<script type="text/javascript">
function tosubmit(){
$.post("login.action", $("#f1").serialize());
}
</script>
<form name="loginForm" action="login.action" method="post" id="f1">
用户名：<input type="text" name="userName"/><br>
密 码：<input type="text" name="password"/><br>
<input type="button" value="登录"/>
</form>
当 ajax 以序列化的形式提交数据的时候，需要指定<form>的id，例如本例中 <form id="f1">
在 ajax 的 post 方法的第2个参数中指定以序列化方式：$("#f1").serialize() 。就是把f1这个form序列化后传给后台。
在 form 中，还是像平时一样，写上业务需要的各个属性，并且在struts的 action 中都有对应的属性值及set和get方法。这样在action中就会取到页面上通过 ajax 提交的值。
例如本例中就可以动态的获得页面上输入的 userName, password 的值。
4、jsp页面 (ajax 提交数据后，带回调函数的例子)
<script type="text/javascript">
function tosubmit(){
$.post("login.action", $("#f1").serialize(),function(wjy){
if(wjy==0){
alert("用户名密码正确!");
}else{
alert("用户名密码错误!");
}
});
}
</script>
<form name="loginForm" action="login.action" method="post" id="f1">
用户名：<input type="text" name="userName"/><br>
密 码：<input type="text" name="password"/><br>
<input type="button" value="登录"/>
</form>
当 ajax 提交数据后会调用一个匿名的回调函数 function(wjy){...} 。参数wjy是从后台传过来的值，如果传过来的值为0，则表示用户名密码正确；如果从后台传回来的值为1，则表示用户名密码错误。现在看下后台代码：
public class HelloWorld extends ActionSupport {
private static final long serialVersionUID = -1909952087423834225L;
private String userName;
private String password;
public String execute() throws Exception {
//验证用户名和密码的合法性，正常来说需要取数据库中的值来验证
if("wangjy".equals(userName) && "403".equals(password)){
ServletActionContext.getResponse().getWriter().print(0);
}else{
ServletActionContext.getResponse().getWriter().print(1);
}
return null;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
当 ajax 传进来的userName 和 password 分别为 wangjy 和 403 的时候，表示用户名密码争取，返回到页面值为0。
ServletActionContext.getResponse().getWriter().print(0); 表示返回页面的值。
注意：action中的方法 execute() 一定要为 null。否则返回页面的值也包括了此方法返回的值，就不仅仅是0或1了。
http://www.myexception.cn/javascript/604213.html
AJAX异步请求返回JSON格式的数据（struts2+JQuery+JSON）
通过异步请求返回json格式的数据，然后组装，在界面显示
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import com.opensymphony.xwork2.ActionSupport;
public class JsonAjax extends ActionSupport {
private static final long serialVersionUID = -6745063993271552844L;
//返回json格式的数据
private String result;
/**
* 处理方法
* @return
* @throws Exception
* @create_time 2011-5-30 下午04:47:34
*/
public String jsonAjaxExample()throws Exception{
JSONObject obj=new JSONObject();
JSONObject obj1=new JSONObject();
obj.element("name", "yao");
obj.element("age", "20");
obj1.element("name", "laughing");
obj1.element("age", "5");
JSONArray array=new JSONArray();
array.add(obj);
array.add(obj1);
StringBuffer sb=new StringBuffer();
sb.append("{member:");
sb.append(array);
sb.append("}");
result=sb.toString();
return SUCCESS;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
}
xml代码
<package name="json" extends="json-default">
<action name="jsonAjax" class="com.aicaipiao.ggtj.action.base.JsonAjax" method="jsonAjaxExample">
<!-- 返回类型为json 在json-default中定义 -->
<result name="success" type="json">
<!-- root的值对应要返回的值的属性 -->
<!-- 这里的result值即是 对应action中的 result -->
<param name="root">result</param>
</result>
</action>
</package>
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>json ajax example</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#json").click(function(){
$.ajax({
url:"jsonAjax.html",
type:"post",
dataType:"json",
data:"",
error:function(){
},
success:function(data){
var value=eval("("+data+")");
var buf="" ;
//遍历json返回数据
$(value.member).each(function(i,mem){
buf+="<li>姓名:";
buf+=mem.name;
buf+="---年龄:";
buf+=mem.age;
buf+="</li>";
});
$("#jsonAjaxResult").append(buf);
}
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td><input type="button" id="json" value="json例子" name="json"/></td>
</tr>
</table>
<div >
<ul id="jsonAjaxResult"></ul>
</div>
</body>
</html>
黑色头发:http://heisetoufa.iteye.com/
jquery ajax后台向前台传list 前台用jquery $.each遍历list
下边是两种前台接收并遍历list
$.ajax({
type: 'post',
url: xxx.action',
dataType: 'text',
success: function(data){
var dataObj=eval("("+data+")");
for(var i=0;i<dataObj.length;i++){
alert(dataObj[i].id+" "+dataObj[i].name);
}
var jsonObj=eval("("+data+")");
$.each(jsonObj, function (i, item) {
alert(item.id + "," + item.name);
});
},
error: function(text) {}
});
下边是后台接收并遍历list
HttpServletResponse res = ServletActionContext.getResponse();
res.reset();
res.setContentType("text/html;charset=utf-8");
PrintWriter pw = res.getWriter();
xxx.setId(1);
xxx.setName("黑色头发");
list.add(xxx);
xxx.setId(2);
xxx.setName("紫色头发");
list.add(xxx);
String json = JSONArray.fromObject(list).toString();
pw.print(json);
pw.flush();
pw.close();
http://www.myexception.cn/ajax/738280.html
jquery ajax后台返回list，前台用jquery遍历list
$.ajax({
type: 'post',
url: "maintain_findRoomByBuildingId.shtml",
cache: false,
data: {"buildingId":buildingId},
dataType: 'json',
success: function(data){
jQuery.each(data.roomList, function(i,item){
alert(item.id+","+item.name);
});
},
error: function(){
return;
}
});http://www.myexception.cn/ajax/1044387.html
$().each() 与 $.each()区别，以及 jquery ajax 应用
在jquery 中我们可以选择$().each() 与 $.each() 进行迭代对象和数组
$(items).each(function(){
//item
}) ,
而后者则
$.each(items,function(i,item){
//write your code
})
-----------------jquery ajax----------------------
jquery 开发ajax 相对来说 是比较简单的 具体情况可以参考 [QLeelulu的ajax系列]
1.ajax 读取 XML
<? xml version="1.0" encoding="utf-8" ?>
< users >
< user sex ="0" >
< name > abcd1 </ name >
< age > 12 </ age >
</ user >
< user sex ="1" >
< name > abcd2 </ name >
< age > 13 </ age >
</ user >
</ users >
$( " .getData " ).click( function (){
$.ajax({
url: " XMLFile.xml " ,
success: function (data)
{
$(data).find( " user " ).each( function (){
alert($( this ).attr( " sex " )); // 获取属性
alert($( this ).children( " age " ).text()); // 获取item 中的 age
})
},
beforeSend: function (){
$( " .loading " ).html( " 数据加载中
.
"
);},
error: function (){
},
golable: false ,
datatype: " xml " ,
complete: function ()
{
$( " .loading " ).html( "" );
$( " .loading " ).html( " 数据加载完成
"
);}
})
});
})
2. jquery 读取 json
json 格式：
$.ajax({
success: function (json)
{
json = eval_r( " ( " + json + " ) " ); // 将数据转成json格式
$.each(json, function (i,item){
document.write( " UserID " + String(item.userID) + " Name: " + item.Name + " Email: " + item.Email + " <br/> " );
});
},
beforeSend: function (){
},
error: function (){
},
golable: false ,
datatype: " json " ,
complete: function ()
{
}
})
| 参数名 | 类型 | 描述 |
| url | String | (默认: 当前页地址) 发送请求的地址。 |
| type | String | (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 |
| timeout | Number | 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 |
| async | Boolean | (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 |
| beforeSend | Function | 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。function (XMLHttpRequest) { this; // the options for this ajax request } |
| cache | Boolean | (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。 |
| complete | Function | 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。function (XMLHttpRequest, textStatus) { this; // the options for this ajax request } |
| contentType | String | (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 |
| data | Object, String |
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 |
| dataType | String | 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值: "xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 |
| error | Function | (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request } |
| global | Boolean | (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
| ifModified | Boolean | (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 |
| processData | Boolean | (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 |
| success | Function | 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc...this; // the options for this ajax request } |
-------------------------JSON数据获取---------------------
window.onload=function(){
getJSON();//获取多组数据
getData();//获取单组数据
}
function getJSON()
{
var json="[{'UserID':11, 'Name':'rddy', 'Email':'zhuleiprohotmail.com'},{'UserID':12, 'Name':'Tfddly', 'Email':'jjjail.com'},{'UserID':351, 'Name':'Truly', 'Email':'zhulm'}]";
json=eval_r("("+josn+")");//将字符串转换成josn格式
$.each(json,function(i,item){
document.writeln("UserID"+String(item.userID)+" Name:"+item.Name+" Email:"+item.Email+"<br/>");
});
}
function getData()
{
var json="{'userID':12,'name':['rhythm','rhythmk']}";
json=eval_r("("+json+")");
document.write(json.name[1]);//rhythmk
document.write(json.name);//rhythm,rhythmk