Ajax+struts2+json進行對象list前後端傳遞

我們在處理前後端數據的傳遞過程中，經常需要從前臺傳入大量的數據信息與後臺進行交互。
那麼ajax在其中起到了關鍵的作用，配後後端的mvc框架，使用json信息傳輸信息。
在這個過程中需要將前端的對象傳遞至後端，本文就來介紹一下這一過程

首先js代碼中我們構建一個數據對象

var dataObj = {
        "data" : [ {
            "active" : "true",
            "color" : "orange",
            "date" : "2008-01-01",
            "id" : "1",
            "name" : "Chris"
        }, {
            "active" : "false",
            "color" : "blue",
            "date" : "2013-03-03",
            "id" : "2",
            "name" : "Kate"
        }, {
            "active" : "true",
            "color" : "black",
            "date" : "2013-05-03",
            "id" : "3",
            "name" : "Blade"
        }, {
            "active" : "false",
            "color" : "yellow",
            "date" : "2013-01-01",
            "id" : "4",
            "name" : "Zack"
        } ]
    };

然後將js對象轉成JSON的格式，
這裏的JSON.stringify()方法就是用來將js對象轉化成JSON的。

var data1 = JSON.stringify(dataObj);

調用$.ajax()進行傳遞

    $.ajax({
        url : "writeJSON.action",//調用後臺action
        data : data1,//上面需要傳遞的對象信息
        dataType : 'json',
        contentType : 'application/json',
        type : 'POST',
        async : true,
        success : function(res) {//調用成功後返回的信息
            console.log(res.data.length);
            for(var i=0; i<res.data.length;i++){
                alert(" "+res.data[i].name+"-"+res.data[i].id+"-"+res.data[i].active+"-"+res.data[i].date);
            }
        }
    });
}

這樣前臺發送的信息我們已經編寫完成，現在需要編寫後臺java代碼。
由於後臺我們用到了strtus2框架，這裏需要配置web.xml和struts.xml

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>struts2JSON</display-name>

  <filter>
        <filter-name>struts2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

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.action.extension" value="action,pdf" />
    <constant name="struts.i18n.reload" value="true" />
    <constant name="struts.configuration.xml.reload" value="true" />
    <constant name="struts.custom.i18n.resources" value="i18n/ap,application" />
    <constant name="struts.date.format" value="yyyy-MM-dd" />
    <constant name="struts.serve.static" value="true" />
    <constant name="struts.serve.static.browserCache" value="false" />

    <package name="default" namespace="/" extends="json-default">

        <interceptors>
            <interceptor-stack name="defaultStack">
                <interceptor-ref name="json">
                    <param name="enableSMD">true</param>
                </interceptor-ref>
            </interceptor-stack>
        </interceptors>
        <default-interceptor-ref name="defaultStack" />

        <action name="writeJSON" class="com.test.json.ReadJSON" method="writeJSON">
            <result type="json" />
        </action>
    </package>
</struts>

同時需要一個javaBean用來接收前端傳來的json數據，這裏要注意一下，javaBean的各個變量命名要和json數據各個變量的命名一致。

Report.java

package com.test.json;

public class Report {
    private int id;
    private String name;
    private boolean active;
    private String date;
    private String color;

    public Report(){
        System.out.println("Inside Constructor with 0 arguments");
    }

public Report(int id,String name,boolean active,String date,String color){
        this.active=active;
        this.id=id;
        this.name=name;
        this.color=color;
        this.date=date;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public boolean isActive() {
        return active;
    }

    public void setActive(boolean active) {
        this.active = active;
    }

    public String getDate() {
        return date;
    }

    public void setDate(String date) {
        this.date = date;
    }

    public String getColor() {
        return color;
    }

    public void setColor(String color) {
        this.color = color;
    }

}

下面是關鍵的action部分了

ReadJSON.java

package com.test.json;

import java.util.ArrayList;
import java.util.List;
import com.rajesh.json.Report;
import com.opensymphony.xwork2.ActionSupport;

public class ReadJSON extends ActionSupport {

    private static final long serialVersionUID = -6765991741441442190L;
    //此處定義對象，data爲接收的json對象
    private List<Report> data;

    public String readJSON() {
        try {
            System.out.println(data.size());

            for (int i = 0; i < data.size(); i++) {
                System.out.println("Data  " + data.get(i).getColor() +"-"+ data.get(i).getDate() +"-"+ data.get(i).getId()+"-"+ data.get(i).getName());
            }

            System.out.println("Execute Method");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return SUCCESS;
    }
//一定要有get和set方法
    public List<Report> getData() {
        return data;
    }

    public void setData(List<Report> data) {
        this.data = data;
    }

}

這樣一個Ajax+struts2+json進行對象list前後端傳遞的簡單demo就完成了。