在django中使用python函数调用javascript函数

时间:2018-05-24 09:23:48

标签: javascript python html django

我有一个使用django框架构建的网站,它接受一个输入csv文件夹来进行一些数据处理。我想使用html文本框作为控制台日志,让用户知道数据处理正在进行中。使用python函数完成数据处理。我可以使用我的python函数以一定的间隔在文本框中更改/添加文本输入吗?

很抱歉,如果我对我的问题不够具体,还在学习如何使用这些工具!

编辑 - 感谢所有的帮助,但我仍然很新,有很多我不太懂的东西。这是我的python函数的一个例子,不确定它是否有帮助

def query_result(request, job_id):
info_dict = request.session['info_dict']
machines = lt.trace_machine(inputFile.LOT.tolist())
return render(request, 'tools/result.html', {'dict': json.dumps(info_dict),
                                             'job_id': job_id})

实际上,我的主要目标是让用户知道数据处理已经开始并且网站正在运行。我想也许我可以在html文本框中显示输出日志来达到这个目的。

3 个答案:

答案 0 :(得分:0)

虽然服务器(Django)不可能直接更新客户端(浏览器),但您可以使用JavaScript来发出请求,Django可以返回StreamingHttpResponse。收到响应的每个部分后,您可以使用JavaScript更新文本框。

以下是包含伪代码的示例

def process_csv_request(request):
    csv_file = get_csv_file(requests)
    return StreamingHttpResponse(process_file(csv_file))

def process_file(csv_file):
    for row in csv_file:
         yield progress
         actual_processing(row)
    return "Done"

或者,您可以将进程写入db或某个缓存,并调用从前端重复返回进度的API

答案 1 :(得分:0)

不能不这样做,因为你已经在服务器端因此无法触及html页面中的任何内容。

您可以通过以下两种方式执行此操作:

  1. 您可以创建一个间隔函数来调用服务器并询问进度并在回调函数中更新您想要的进度。

  2. 您可以在服务器中打开套接字连接&浏览器即时更新。

答案 2 :(得分:0)

您可以使用Django Channels的网页框来实现此目的。

以下是消费者样本:

class Consumer(WebsocketConsumer):
    def connect(self):
        self.group_name = self.scope['user']
        print(self.group_name)  # use this for debugging not sure what the scope returns

        # Join group
        async_to_sync(self.channel_layer.group_add)(
            self.group_name,
            self.channel_name
        )
        self.accept()

    def disconnect(self, close_code):
        # Leave group
        async_to_sync(self.channel_layer.group_discard)(
            self.group_name,
            self.channel_name
        )

    def update_html(self, event):
        status = event['status']
        # Send message to WebSocket
        self.send(text_data=json.dumps({
            'status': status
        }))

通过Channels 2.0教程,您将了解到通过在页面上放置一些javascript,每次加载它都会将您连接到websocket消费者。在connect()上,消费者将用户添加到组中。 csv处理函数使用此组名称向连接到该组的任何用户(在本例中只是一个用户)发送消息并更新页面上的html。

def send_update(channel_layer, group_name, message):
    async_to_sync(channel_layer.group_send)(
        group_name,
        {
            'type': 'update_html',
            'status': message
        }
    )

def process_csv(file):
    channel_layer = get_channel_layer()
    group_name = get_user_name()  # function to get same group name as in connect()
    with open(file) as f:
        reader=csv.reader(f)
        send_update(channel_layer, group_name, 'Opened file')
        for row in reader:
            send_update(channel_layer, group_name, 'Processing Row#: %s' % row)

您可以在频道文档中列出您的网页上添加javascript,然后再添加onmessage函数来更新html:

var WebSocket = new ReconnectiongWebSocket(...);

WebSocket.onmessage = function(e) {
    var data = JSON.parse(e.data);
    $('#htmlToReplace').html(data['status']);
}