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就完成了。

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值