多个Ajax请求的结果，一个依赖于其他Ajax输出

Result of Multiple Ajax requests, one depends on other Ajax Output

本文关键字：Ajax 一个 依赖于 其他 输出 请求 结果 多个      更新时间：2023-09-26

我正在Perl Catalyst上开发一个web应用程序，并使用ReactJS作为视图，jQuery用于AJAX，并在标题中添加JSX作为脚本。

我能够在页面上获取AJAX JSON数据并每10秒刷新一次数据。我们在服务器上创建了这个选项，以便每10秒获取一次数据。此应用程序将由许多用户一起使用，因此我们自动生成一个键，如果该数据库表上的任何数据被更新，该键将递增。我们将此键设置在其余部分，并且可以通过AJAX JSON访问它。

我想实现一个React组件，它将检查这个自动生成的AJAX JSON键，并将其与之前的值每10秒进行比较。如果它们不相等，那么它将调用其他AJAX函数或React组件来更新视图页面上的数据，旧的值将被新的值所取代。

我已经搜索了很多，但没有得到在ReactJS中实现这一逻辑。任何逻辑或参考链接都会有所帮助。

考虑将"Refresh_token"组件作为控制器。它将处理所有检查令牌，并在令牌更改时获取新订单。"Order list"不应该知道令牌何时更改，它的工作是在新列表到达时重新呈现其视图。

//Section 1 Starts Here
var Orderlist = React.createClass({
	render: function(){
        var orderlist11 = [];
        for(var i = 0; i < this.props.list.length; i++){
        	var orderItem = this.props.list[i];
	        orderlist11.push(
	        	<div className="card">
	        		<div className="title">
	        			Order Number {orderItem.ordernumber} 
	        		</div>
        			<div className="content"> 
        				Date & Time : {orderItem.bizorderdate} <br />
         				Username : {orderItem.userid}
        			</div>
                </div>
            );
		}
        return (
            <div> {orderlist11} </div>
        );
 	}
});
 
////// Section 1 ends here
 
 
var RefreshToken = React.createClass({
 	
    getInitialState : function(){
        return {
            token : -1 , //Or anything that is not a token.
            orderlist : []
        }                      
    },
    refreshTimer : null,
    componentDidMount : function(){
    	this.get_order_list(); //Get the intial order list
        this.refreshTimer = setInterval(this.refresh_token, 10000); //Call to check the new token every 10s
    },
     
    refresh_token : function(){
        $.ajax({
            type: 'GET',
            url: "/order/refresh",
            headers: {
                Accept : "application/json","Content-Type": "application/json"
            },
            success: function (resp){
            	var newToken = resp;
           		console.log(newToken); //it give the value of refresh eg. ["20150925313"] //Assume this will give the new value of the order list changed.
                if(newToken != this.state.token){
                    this.setState({ token: newToken});
                    this.get_order_list() //Get the new list when token has changed.
            //      console.log(this.state.resp);
                } 
            }.bind(this)
        });
    },
   	get_order_list : function(){
        $.ajax({
            type: 'GET',
            url: "/order/list/10/1",
            headers: {
            Accept : "application/json", "Content-Type": "application/json"
            },
            success: function(orderlist) {
	            //      console.log(orderlist);
	            //      console.log(this.state.orderlist);
           		this.setState({orderlist: orderlist});
           	}.bind(this),
           	error: function(xhr, status, err) {
       		}
        });
    },
    render: function(){
    	return <Orderlist list={this.state.orderlist} />
    }
});
 
React.render(
  <RefreshToken  />,
  document.getElementById('list_of_orders')
);

相关文章：