struts2 jquery json进行ajax请求(1)
程序员文章站
2022-03-11 21:25:59
...
struts2 jquery json进行ajax请求
2010-05-25 15:31
第一步：创建 名为"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中找。
2010-05-25 15:31
第一步：创建 名为"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中找。
上一篇： Platform Command Framework
下一篇： 添加好友近期博客
推荐阅读
-
jquery教程ajax请求json数据示例
-
jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
-
jQuery Ajax前后端使用JSON进行交互示例
-
jquery的ajax异步请求接收返回json数据实例
-
使用jquery中封装的$.Ajax()进行异步通信并使用json方式实现数据传输
-
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
-
通过jquery的ajax请求本地的json文件方法
-
jquery教程ajax请求json数据示例
-
jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
-
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据_jquery