在Struts2中使用JSON AJAX

ps329795485

浏览: 52619 次
性别:
来自: 北京

最近访客更多访客>>

gxpcw

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (71)

社区版块

存档分类

JSON插件提供了一种名为json的ResultType，一旦为某个Action指定了一个类型为json的Result，则该Result无需映射到任何视图资源。因为JSON插件会负责将Action里的状态信息序列化成JSON格式的数据，并将该数据返回给客户端页面的JavaScript。

　　简单地说，JSON插件允许我们在JavaScript中异步调用Action，而且Action不再需要使用视图资源来显示该Action里的状态信息，而是由JSON插件负责将Action里的状态信息返回给调用页面——通过这种方式，就可以完成Ajax交互。

　　Struts2提供了一种可插拔方式来管理插件，安装Struts2的JSON插件与安装普通插件并没有太大的区别，一样只需要将Struts2插件的JAR文件复制到Web应用的WEB-INF/lib路径下即可。

--------引用

JSON插件下载地址：JSON插件下载

框架结构为：struts2 jquery JSON

首先搭建struts2环境

然后引入jar包如下图：

还需引入jquery.js文件

整个项目结构图如下

配置struts.xml

<?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> <constant name="struts.enable.DynamicMethodInvocation" value="false" /> <constant name="struts.devMode" value="false" /> <package name="default" namespace="/" extends="json-default"> <action name="loginAction" class="com.org.LoginAction"> <result name="success" type="json"></result> </action> </package>  </struts>
建立Action类 LoginAction.java
package com.org; public class LoginAction { private String username; //用户名 private String password; //密码 private String realname; //真实姓名 private String age; //年龄 private String address; //地址 public String getRealname() { return realname; } public void setRealname(String realname) { this.realname = realname; } public String getAge() { return age; } public void setAge(String age) { this.age = age; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } 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; } public String execute() { //我很郁闷不知道JSON是怎么从这个Action中得到的数据 //LoginAction login = new LoginAction(); /*login.setUsername(username); login.setPassword(password); login.setRealname(realname); login.setAddress(address); login.setAge(age);*/ //JSONObject obj = JSONObject.fromObject(login); return "success"; } }
前台页面 login.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ page contentType="text/html; charset=utf-8"%>  <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'login.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <script type="text/javascript" src="js/jquery-1.7.1.js"></script> <script type="text/javascript" src="js/my.js"></script> </head> <body> <% //竟然还是TMD乱码 response.setContentType("text/html;charset=utf-8"); request.setCharacterEncoding("utf-8"); %> <div id="msg"></div>  <form action="" method="post"> 用户名：<input type="text" name="username" id="username"><br> 密码: <input type="password" name="password" id="password"><br> 真实姓名：<input type="text" name="name" id="realname"><br> 年龄：<input type="text" name="age" id="age"><br> 住址：<input type="text" name="address" id="address"><br> <input type="button" value="提交" id="btn" /> </form> </body> </html>
my.js
$(document).ready(function(){ $("#btn").click(function(){ var url = "loginAction"; //URL路径 var username = $("#username").val(); var password = $("#password").val(); var realname = $("#realname").val(); var age = $("#age").val(); var address = $("#address").val(); //参数 var params = {"username":username,"password":password,"realname":realname,"age":age,"address":address}; $.ajax({ url:url, type:"post", dataType:"json", data:params, success:callBack //回调函数 }) }) function callBack(result){ //为什么不是eval("("+result+")") 也郁闷中 var json = eval(result); var str = "username:" + json.username + "<br />"; str += "password:" + json.password + "<br />"; str += "realname:" + json.realname + "<br />"; str += "age:" + json.age + "<br />"; str += "address:" + json.address + "<br />"; $("#msg").html(str); } })
备注：

在调试的时候出现了乱码，本人水平有限，解决不了。

在login.jsp中设置了

<%@ page contentType="text/html; charset=utf-8"%>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<%
//竟然还是TMD乱码
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
%>

最后在struts.xml中也配置了

<constant name="struts.i18n.encoding" value="UTF-8" />

还是乱码....

在struts.xml的配置文件中需要注意一点：

package继承的是json-default 而不是struts-default 这是因为只有在该包下才有JSON类型的Result

写到此处还是有点不明：

在my.js 中利用ajax请求地址到loginAction返回是JSON格式数据，不知道它是如何得到Action中的数据的。