什么是json
JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度。
JSON就是一串字符串 只不过元素会使用特定的符号标注。
- {} 双括号表示对象
- [] 中括号表示数组
- “” 双引号内是属性或值
- 冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象)
例如:
1、 {“name”: “Michael”} 可以理解为是一个包含name为Michael的对象
2、[{“name”: “Michael”},{“name”: “Jerry”}]就表示包含两个对象的数组
3、{“name”:[“Michael”,”Jerry”]}可以简化上一个例子,这是一个拥有一个name数组的对象
什么是ajax
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax不是一种新的编程语言,而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
普通方法使用Ajax需要较多代码,而jquery对ajax进行了封装,所以我们一般使用jquery的方法来调用ajax
一般有如下方法:
1.load(url,[data],[callback])
2.jQuery.get(url, [data], [callback])
3.jQuery.post(url, [data], [callback])
4.jQuery.getScript(url,[callback])
5.jQuery.getJSON(url,[data],[callback])
6.jQuery.ajax()
一般而言我们都会使用jQuery.ajax()来处理较为复杂的请求,具体使用和内容请详阅参考链接
struts2返回json的三种方法
1、response对象返回 response.setContentType(“text/html”);
2、通过struts返回stream来输出
3、使用struts2-json-plugin插件
struts2-json-plugin的marven配置
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-json-plugin</artifactId>
<version>2.3.8</version>
</dependency>
struts.xml配置
<package name="test-default" namespace="/" extends="json-default">
<!-- json测试 -->
<action name="json1" class="json.JsonAction" method="response">
</action>
<action name="json2" class="json.JsonAction" method="stream">
<result type="stream">
<param name="contentType">text/html</param>
<param name="inputName">inputStream</param>
</result>
</action>
<action name="json3" class="json.JsonAction" method="jsonPlugin">
<result type="json">
<param name="root">json</param>
</result>
</action>
</package>
注意
:name为”json”的result type是在json-default中定义的,所以,从json-default继承才可以使用json这个result。所以一般与json相关的单独使用一个包来定义,当然也可在普通包中定义json的返回结果:
<result-types>
<result-type name="json" class="org.apache.struts2.json.JSONResult"/>
</result-types>
JSONAction
/**
*
*/
package json;
import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.alibaba.fastjson.JSON;
import com.opensymphony.xwork2.ActionSupport;
import entity.Users;
import lombok.Getter;
import lombok.Setter;
/**
* @author Administrator
*
*/
public class JsonAction extends ActionSupport {
private InputStream inputStream;
@Getter @Setter
private String json = JSON.toJSONString(new Users("张三", "123"));
public void response() {
try {
// HttpServletResponse response =
// (HttpServletResponse)ActionContext.getContext().get(org.apache.struts2.StrutsStatics.HTTP_RESPONSE);
HttpServletResponse response = ServletActionContext.getResponse();
PrintWriter out;
out = response.getWriter();
out.print(json);
} catch (IOException e) {
e.printStackTrace();
}
}
public String stream() {
try {
inputStream = new ByteArrayInputStream(json.getBytes());
} catch (Exception e) {
e.printStackTrace();
}
return SUCCESS;
}
public InputStream getInputStream() {
return inputStream;
}
public String jsonPlugin() {
return SUCCESS;
}
}
以上是三种方法返回json数据:
1、response()对应json1.action即第一种方法
2、stream()和 getInputStream()对应json2.acion即第二种方法
3、jsonPlugin()对应json3.action即第三种方法
其中用到了fastjson,所以在marven中添加依赖
<!-- 引入fastJSON的依赖 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.45</version>
</dependency>
json.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON测试页面</title>
<script src="js/jquery1.42.min.js" type="text/javascript"></script>
</head>
<body>
<input id="loginBtn" type="button" value="提交">
<div id="show" style="display:none;"></div>
</body>
<script type="text/javascript">
$("#loginBtn").click(function(){
$("#show").hide();
//发送请求login 以各表单里歌空间作为请求参数
$.get("json3.action",//分别请求json1.action和json2.action结果相同
function(data,statusText){
$("#show").height(80)
.width(240)
.css("border","1px solid black")
.css("border-radius","15px")
.css("backgroud-color","#efef99")
.css("color","#ff0000")
.css("padding","20px")
.empty();
$("#show").append("返回结果:"+data+"<br/>");
$("#show").show(600);
},"json");//指定服务器响应为json
});
</script>
</html>
点击提交按钮会使用ajax向json3.action提交异步请求,返回json数据,效果如下