【SSH (七) 】使用ajax + json 交互
2016-03-14 14:55
495 查看
1，按照之前的介绍先搭建一个struts2+spring的项目。
2，加入json要用的jar包。
（1）json-lib-jdk.jar：这个是java相关的类库，用它可以将普通的java对象转化成json格式的对象；
（2）struts2-json-plugin.jar：是struts2对json的支持，体现在struts的配置文件的result标签；
（2）json-lib-jdk.jar依赖的相关jar文件：会大量调用commons-*的jar，主要有：commons-beanutils-1.8.0.jar，commons-collections-3.1.jar，commons-lang-2.5.jar，commons-lang3-3.2.jar（和前面的不一样,这两个都得要。。。），commons-logging-1.1.3.jar。最后还有一个ezmorph-1.0.3.jar。上面少一个都不能运行。
3，struts2的配置文件：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<constant name="struts.action.extension" value="do"/>
<package name="default" extends="json-default">
<action name="index" class="ajaxAction">
<result name="success">/WEB-INF/jsp/index.jsp</result>
</action>
<action name="ajax" class="ajaxAction" method="f">
<result type="json">
<param name="root">result</param>
</result>
</action>
</package>
</struts>result 的type是json，param的name是root，这是固定的格式，result是action的一个变量，会传到ajax的success函数，在action中要有这个变量的getter方法。
4，Action：
package com.action;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import com.bean.People;
import com.opensymphony.xwork2.ActionSupport;
import net.sf.json.JSONObject;
public class AjaxAction extends ActionSupport{
/**
*
*/
private static final long serialVersionUID = 1L;
private String result;
private String params;
public String execute(){
return SUCCESS;
}
public String f(){
data();
System.out.println("接收到参数: "+params);
return SUCCESS;
}
private void data(){
ArrayList<People> list = new ArrayList<People>();
People p1 = new People();
p1.setAddress("a1");
p1.setName("l1");
People p2 = new People();
p2.setAddress("a2");
p2.setName("l2");
list.add(p1);
list.add(p2);
Map<String,Object> map = new HashMap<String,Object>();
map.put("hehe", "meme");
map.put("glgl", list);
result = JSONObject.fromObject(map).toString();
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public String getParams() {
return params;
}
public void setParams(String params) {
this.params = params;
}
}
把所有的数据都放在一个map中，然后使用jsonobject对象的方法将普通的java对象转化成json格式的对象，result就是json格式对象的string格式，这才是最终返回到ajax的数据。
5，前台：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
</head>
<body>
<h3>success</h3>
</body>
<script type="text/javascript">
$(document).ready(function(){
$.post(
"ajax.do",
{params:"ajaxParam"},
function(data){
console.log(data);
var member = eval("("+data+")");
alert(member.hehe);
alert(member.glgl[0].name);
},"json");
});
</script>
</html>
$.ajax函数的参数是键值对，可以设置很多东西。
$.post是上面的一个简体版，参数就是string。在success函数里面要访问data，要做一个处理，用eval函数。因为后台返回的是一个string，而这里我们要用面向对象的方式访问，也就是点号，很显然对一个string是不可以的，必须将它转化成js的对象，才行。
后台传来的数据：
项目源码：
http://pan.baidu.com/s/1mgY1HSO
2，加入json要用的jar包。
（1）json-lib-jdk.jar：这个是java相关的类库，用它可以将普通的java对象转化成json格式的对象；
（2）struts2-json-plugin.jar：是struts2对json的支持，体现在struts的配置文件的result标签；
（2）json-lib-jdk.jar依赖的相关jar文件：会大量调用commons-*的jar，主要有：commons-beanutils-1.8.0.jar，commons-collections-3.1.jar，commons-lang-2.5.jar，commons-lang3-3.2.jar（和前面的不一样,这两个都得要。。。），commons-logging-1.1.3.jar。最后还有一个ezmorph-1.0.3.jar。上面少一个都不能运行。
3，struts2的配置文件：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<constant name="struts.action.extension" value="do"/>
<package name="default" extends="json-default">
<action name="index" class="ajaxAction">
<result name="success">/WEB-INF/jsp/index.jsp</result>
</action>
<action name="ajax" class="ajaxAction" method="f">
<result type="json">
<param name="root">result</param>
</result>
</action>
</package>
</struts>result 的type是json，param的name是root，这是固定的格式，result是action的一个变量，会传到ajax的success函数，在action中要有这个变量的getter方法。
4，Action：
package com.action;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import com.bean.People;
import com.opensymphony.xwork2.ActionSupport;
import net.sf.json.JSONObject;
public class AjaxAction extends ActionSupport{
/**
*
*/
private static final long serialVersionUID = 1L;
private String result;
private String params;
public String execute(){
return SUCCESS;
}
public String f(){
data();
System.out.println("接收到参数: "+params);
return SUCCESS;
}
private void data(){
ArrayList<People> list = new ArrayList<People>();
People p1 = new People();
p1.setAddress("a1");
p1.setName("l1");
People p2 = new People();
p2.setAddress("a2");
p2.setName("l2");
list.add(p1);
list.add(p2);
Map<String,Object> map = new HashMap<String,Object>();
map.put("hehe", "meme");
map.put("glgl", list);
result = JSONObject.fromObject(map).toString();
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public String getParams() {
return params;
}
public void setParams(String params) {
this.params = params;
}
}
把所有的数据都放在一个map中，然后使用jsonobject对象的方法将普通的java对象转化成json格式的对象，result就是json格式对象的string格式，这才是最终返回到ajax的数据。
5，前台：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
</head>
<body>
<h3>success</h3>
</body>
<script type="text/javascript">
$(document).ready(function(){
$.post(
"ajax.do",
{params:"ajaxParam"},
function(data){
console.log(data);
var member = eval("("+data+")");
alert(member.hehe);
alert(member.glgl[0].name);
},"json");
});
</script>
</html>
$.ajax函数的参数是键值对，可以设置很多东西。
$.post是上面的一个简体版，参数就是string。在success函数里面要访问data，要做一个处理，用eval函数。因为后台返回的是一个string，而这里我们要用面向对象的方式访问，也就是点号，很显然对一个string是不可以的，必须将它转化成js的对象，才行。
后台传来的数据：
项目源码：
http://pan.baidu.com/s/1mgY1HSO
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript对象数组表格处理加案例
- JSP标准标签
- JavaScript学习笔记——基本包装类型（上）Boolean、Number
- javascript的date()和getTime()区别
- 《JavaScript高级程序设计》第7章 函数表达式
- JS正则表达式匹配<div><style>标签
- js函数对象
- 在JavaScript中创建命名空间的几种写法
- （三）ExtJs小例子之：带有输入框的提示框（prompt）
- 【JavaScript】（8）——实例：图片切换效果
- JavaScript设计模式 Item8 --外观模式Facade
- javascript window.name是什么?
- JavaScript实现360度全景图片展示效果
- js日期格式化
- JavaScript生成八位随机数（含数字、字母、特殊符号）
- IE8以下的attachEvent()和其他浏览器的addEventListener()区别
- JSON
- 【Egret】Lakeshore 使用中的一些疑难解决技巧！
- JSP 中文问题完全解决方案
- .net MVC4 web Api输出Json格式实例