Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/369.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/6/haskell/10.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 后端分析结束时调用函数或呈现组件_Javascript_Jquery_Reactjs_Django Rest Framework - Fatal编程技术网

Javascript 后端分析结束时调用函数或呈现组件

Javascript 后端分析结束时调用函数或呈现组件,javascript,jquery,reactjs,django-rest-framework,Javascript,Jquery,Reactjs,Django Rest Framework,我有一个Django Rest React应用程序,我面临一些关于来回解析和接收数据的情况 在前面,用户需要填写表单或选择desire analysis,然后单击Apply按钮,这将触发函数selection(),并呈现一个新组件 applyClick(){ selection(); //POST method to back end this.handleClick_selection(); //closes current component

我有一个Django Rest React应用程序,我面临一些关于来回解析和接收数据的情况

在前面,用户需要填写表单或选择desire analysis,然后单击Apply按钮,这将触发函数selection(),并呈现一个新组件

applyClick(){
        selection(); //POST method to back end
        this.handleClick_selection(); //closes current component
        this.handleClick_result(); //opens result component
}

selection() {
    var selected= [this.state.selected_1.value, this.state.selected_2.value]
    var selectedString= JSON.stringify(selected);
    $.ajax({
        type: 'POST',
        url: '/selection/',
        data: selectedString,
        contentType: "application/json",
        dataType: "json",
        success: function(data) {
            console.log("Data sent");   //This has to be deleted in afer development finish
        }.bind(this)
    })
}
这将向视图选择发送一些数据,视图选择运行机器学习算法并将结果转储回json:

def Selection_view(request):
    #the connection/request is completed, the success is returned 
    #to ajax before the machine learning method runs

    #runs the machine learning method
    data = Test(
         result=json.dumps(result).replace("'",'\"')
    )
    data.save
return HttpResponse(status=204)
问题是,当机器学习算法仍在运行时,我的应用按钮也打开了将显示此数据的组件

该组件具有以下安装方法的功能:

componentDidMount(){

    let result_parse = []; //result of the ml algorithm

        $.ajax({
            url: '/test/',
            dataType: 'json',
            cache: false,
            success: function(data) {
                data.map(function(d){
                    result_parse = JSON.parse(d.result), //d.result is the column in the json data that I want to parse
                });
                this.setState({ result: result_parse,); //result is the component state to handle the values
            }.bind(this),
        });

render() {
    return(
        {/* printing the result*/}
    )
}
当最后一个组件加载并执行ajax请求时,机器学习算法仍在后端运行,因此请求的答案为空或错误

我通过设置一个计时器来渲染组件,从而瞬间“解决”了它,如下所示:

applyClick(){
        selection(); //POST method to back end
        window.setTimeout(() => {
            this.handleClick_selection(); //closes current component
            this.handleClick_result(); //opens result component
        }, 2000);
}
因为这样就可以生成POST方法,并且在呈现组件之前,后端有“时间”返回到json的正确值


但是我知道这个答案并不理想,有没有办法告诉我的结果组件只打开json。转储(result)被执行?

你能不能在收到响应后关闭当前组件并在成功函数中显示下一个组件?在那之前,你可以展示一个装载机,我可以做到。但问题是,成功响应是在建立连接时收到的,这是机器学习算法执行的触发器,而不是将响应转储回json。因此,当ajax获得成功时,机器学习算法仍在运行,此时显示其他组件也会导致一个空白调用。我将对问题进行编辑以使其更清楚。我想您可能希望在进程完成时开始轮询服务器,或者使用套接字从服务器进行通信,告知进程已完成@Lucas@RagulParani你有没有一个链接来解释这个实现?因为这正是我所需要的,但我对这种交流不太熟悉。