java后台传递json数据到前端并渲染react组件（react+struts2）

为什么80%的码农都做不了架构师？>>>   

一、前端包括CommentList，Comment，CommentBox组件（父→子,CommentBox→CommentList→Comment），CommentBox组件负责从后台接收json数据，然后存到组件状态机中，然后CommentList组件用this.props得到json数据再分配给Comment组件。

 

代码如下：

1.CommentBox组件

var CommentBox=React.createClass({
            loadCommentsFromServer:function() {
                $.ajax({
                    url:this.props.url,
                    type:"GET",
                    dataType:"json",
                    cache:false,
                    success:function(data) {
                        this.setState({data:data});
                    }.bind(this),
                    error:function(xhr,status,err) {    
                        console.error(this.props.url, status, err.toString());
                    }.bind(this)
                });
            },
            getInitialState:function() {
                return {data:[]};
            },
            
            componentDidMount:function() {
                this.loadCommentsFromServer();
                setInterval(this.loadCommentsFromServer,this.props.pollInterval);
            },

            render:function() {
                return (
                    <div className="commentBox">
                        <h1>comments</h1>
                        <CommentList data={this.state.data}/>
                        <CommentForm />
                    </div>
                );
            }
});

 

2.CommentList组件

var CommentList=React.createClass({
            render:function() {
                var commentNodes=this.props.data;    
                return (
                    <Comment key={commentNodes.id} author={commentNodes.author}>
                        {commentNodes.text}
                    </Comment>
                );
            }

 });

 

3.Comment组件

var Comment=React.createClass({
            render:function() {
                return (
                    <div className="comment">
                        <h1 className="commentAuthor">{this.props.author}</h1>
                        {this.props.children}
                    </div>
                );
            }
 });

 

 

 

 

二、后台使用struts2框架，利用text类（action类），发送json数据到前端。

 

代码如下：

 

1.text类：

import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import org.json.simple.JSONObject;
import com.opensymphony.xwork2.ActionSupport;

public class text extends ActionSupport{
    public String execute()throws Exception {
   
         HttpServletResponse response=ServletActionContext.getResponse();
         response.setContentType("text/html;charset=UTF-8"); 
         PrintWriter out = response.getWriter();
         
        JSONObject json=new JSONObject();
        json.put("id", "1");
        json.put("author", "a1");
        json.put("text", "用户存在");
        System.out.println(json.toJSONString());
        
        
        return null;
    }
}

注意：这里return null，并且struts.xml文件不用写<result>标签，只写<action>标签配置。

 

 

 

2.struts.xml配置文件

<?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 value="false" name="struts.enable.DynamicMethodInvocation"/>
        <constant value="false" name="struts.devMode"/>
        <constant name="struts.i18n.encoding" value="UTF-8"/>
          <package name="default" extends="struts-default"><!--需要将struts-default改为--> 
              <action name="jsonaction" class="com.SMS.testAction.text">
                  
             </action>
           </package>    
</struts>

 

 

3.web.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_9" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
      <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
    <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>
</web-app>

 

 

另外，前端要读取json数据的值，本例可以直接用json对象·属性(key)读取。

代码如下：

$.ajax({
                        async:true,
                        url:"jsonaction",
                        dataType:"json",
                        type:"GET",
                        success:function(data){
                            alert(data.text);                 /*此处data为json对象，text为属性名*/
                        },
                        error:function(xhr,status,err){
                            alert("失败"+"——"+xhr.responseText+“——”+err.toString());
                        }
  });

转载于:https://my.oschina.net/fycool/blog/796379