Django,更新部分页面

Kia*_*ash 6 javascript django ajax

我正在尝试实现一个简单的代码测试服务器。客户将在网页上提交他们的代码,我们将使用两个测试用例(可能需要几分钟)运行它,然后我们将发布结果。该页面将很简单,带有一个提交表单和一个输出框。

我的问题是更新输出框。我正在寻找实现输出框的最简单方法,以便我们在运行不同的测试用例时显示结果。

我尝试谷歌搜索解决方案,我发现了一些像 socket.io 但我在 ajax 和 socket.io 甚至 js 方面的经验非常有限,所以我正在寻找最简单的方法来做到这一点。

fra*_*les 8

如果您正在寻找代码来自动更新 HTML 中的字段,这里是您可以使用的代码。JavaScript 中的 setInterval 计划每 1 秒拉取一次 get_log 视图以获取 get_log_from_disk 方法的结果。

网址.py

    url(r'^get_log/$', 'myapp.views.get_log', name='get_log'),
    url(r'^submit/$', 'myapp.views.submit', name='submit'),
Run Code Online (Sandbox Code Playgroud)

视图.py

def submit(request):
    ## Handle POST
    ## Your code comes here
    return render(request, 'submit.html', {})

def get_log_from_disk():
    ## Your code comes here
    return "Test 1 OK; Test 2 OK"

def get_log(request):
    results = get_log_from_disk()
    return HttpResponse(results)
Run Code Online (Sandbox Code Playgroud)

在 submit.html 添加

<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>
[<div id="output_box"></div>]

<script>
$(document).ready(function() {
  $.ajaxSetup({ cache: false }); // This part addresses an IE bug.  without it, IE will only load the first number and will never refresh
  var my_refresh = setInterval(function() {
    $('#output_box').load('/get_log/');
  }, 1000); // the "1000"
});

</script>
</body>
Run Code Online (Sandbox Code Playgroud)

你可以修改 "$('#output_box').load('/get_log/');" 测试请求状态,当返回“204 No Content”时,您可以删除该函数(clearInterval(my_refresh);)

请参阅在 JavaScript 中停止 setInterval 调用

修改 get_log 视图,当没有更多内容要发送时返回“204 No Content”。

在这里我上传了工作版本

https://github.com/lukaszszajkowski/Django-jQuery-Example-update-part-of-page/tree/master

一些阅读

使用 jQuery 自动刷新 div - setTimeout 或其他方法?

  • 查看我的实现 https://github.com/lukaszszajkowski/Django-jQuery-Example-update-part-of-page/tree/master (2认同)