【问题标题】:Django, update part of the pageDjango,更新部分页面
【发布时间】:2014-02-03 16:03:16
【问题描述】:

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

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

我尝试在谷歌上搜索解决方案,并找到了一些类似 socket.io 的解决方案,但我对 ajax 和 socket.io 甚至 js 的经验非常有限,所以我正在寻找最简单的方法。

【问题讨论】:

  • 对我来说听起来像是基本的 ajax。您使用 javascript 获取结果并更新输出框。
  • 我知道它应该是基本的。你能指点我某处的一些文档或sn-p吗?

标签: javascript ajax django


【解决方案1】:

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

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?

【讨论】:

  • 这行得通。但是它怎么能更聪明一点..在提交表单之前不ping服务器,并且在服务器发送最后一条消息后不ping?
  • 顺便说一句。我没有得到您在单独的“结果”视图和您的“处理帖子”评论背后的逻辑。除非用户提交 smth,否则不需要结果 url。
  • 是的。 “处理帖子”没有意义 - 这是一个复制粘贴错误。我从提交视图中克隆了结果。单独的结果视图是一个通用解决方案,请参阅docs.djangoproject.com/en/1.5/intro/tutorial04 中的投票实现。 "在成功处理 POST 数据后总是返回一个 HttpResponseRedirect"
【解决方案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'
        )

【讨论】:

  • 谢谢。但是有了这个,我怎样才能在每个测试用例完成后发布结果呢?我的意思是我想多次更新输出框
猜你喜欢
  • 2021-12-17
  • 2012-09-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-06-10
  • 2012-03-14
  • 1970-01-01
相关资源
最近更新 更多