Struts2之-简单使用Ajax交互json数据

什么是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数据,效果如下

《Struts2之-简单使用Ajax交互json数据》

参考

jQuery学习之jQuery Ajax用法详解(转)

史上最全的Ajax基础详解

史上最全ajax全套讲解

Struts2与Ajax数据交互

Struts2 Result 返回JSON对象详解

Gson介绍

JSON的三种解析方式

marven引入各个版本的json

各种json的marven引用

关于Strut2内置Json插件的使用

struts2返回json和几种方式

点赞

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注