Django，更新页面的一部分

Question

Django，更新页面的一部分

javascriptajaxdjango

7

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

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

我尝试了谷歌搜索解决方案，例如socket.io，但是我的ajax、socket.io甚至js的经验非常有限，所以我正在寻找最简单的方法来做到这一点。

- Kiarash

1

听起来像是基本的ajax。你使用javascript获取结果并更新输出框。 - keyser

1

我知道这应该是基础问题。你能指向一些文档或代码片段吗？ - Kiarash

我正在寻找这个标题的答案，然后我发现了另一种基于htmx的解决方案，也许这个评论对其他人有用：https://htmx.org/ - Omid Estaji

2个回答

1

这可能是您正在寻找的内容：

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'
        )

- Gianluca Mancini

谢谢。但是，我该如何在每个测试用例完成后发布其结果？我的意思是，我想更新输出框不止一次。 - Kiarash

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fragles · Accepted Answer

如果你想要自动更新HTML字段的代码，以下是你可以使用的代码。在JavaScript中，setInterval函数将计划每秒调用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 );）

请参见 JavaScript 中停止 setInterval 调用修改 get_log 视图以在没有更多内容要发送时返回 "204 No Content"

这里我已经上传了可工作的版本 https://github.com/lukaszszajkowski/Django-jQuery-Example-update-part-of-page/tree/master 一些阅读材料使用 jQuery 自动刷新 div - 使用 setTimeout 或另一种方法？