Question

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

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

我尝试使用谷歌搜索解决方案，我发现有些像socket.io，但我对ajax和socket.io甚至js的经验非常有限，所以我正在寻找最简单的方法。

Answer 1

如果您要查找自动更新HTML字段的代码，请输入您可以使用的代码。对于get_log_from_disk方法的结果，JavaScript中的setInterval调度get_log视图每1秒被拉一次。

urls.py

    url(r'^get_log/$', 'myapp.views.get_log', name='get_log'),
    url(r'^submit/$', 'myapp.views.submit', name='submit'),

views.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)

在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>

您可以修改“$（'＃output_box'）。load（'/ get_log /'）;”测试请求的状态，当返回“204 No Content”时，您可以删除该功能（clearInterval（my_refresh）;）

请参阅Stop setInterval call in JavaScript

修改get_log视图，以便在没有更多内容发送时返回“204 No Content”。

我在这里上传了工作版

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

一些阅读

Auto-refreshing div with jQuery - setTimeout or another method?

Answer 2

这可能就是你要找的东西：

var ajaxForm = function() {
  $.ajax({
    type: 'POST',
    contentType: 'application/json',
    dataType: 'json',
    url: '/path/to/django/controller',
    // The data sent to the Django view in JSON format
    data: JSON.stringify({
      formField: $('#body').val()
    }),
    success: function (data) {
      $('#output-box').html(data);
    }
  });
}

$('#form').on('submit', function (e) {
  e.preventDefault();
  ajaxForm();
});

Django控制器的实现可以是：

import json
from django.http import HttpResponse

def ajax_view(request):
    if request.method == 'POST':
        request_data = json.load(request.raw_post_data)
        # do something
        response_data = {}
        response_data['result'] = 'Failed'
        response_data['message'] = 'Your test not ended well'
        return HttpResponse(
            json.dumps(response_data),
            content_type='application/json'
        )

Django，更新页面的一部分

2 个答案: