Question

我对Ajax和Django完全陌生。

我正在尝试完成一项任务，该任务调用ajax方法并使用从视图返回的数据更新文本区域。

我到底想做什么？用户从下拉菜单中选择一个选项并提交，该选项内部调用ajax方法，而Ajax必须在我的视图中调用特定方法。一旦视图应返回数据，则必须在我的网页上显示该数据。整个过程应该完成，而无需重新加载页面和重置下拉值。

当前，我能够成功进行ajax调用，但无法在模板上呈现数据。

HTML和Ajax调用：

{% extends 'login/whitebase.html' %}
{% load static %}

<html>
<head>
    <title>Log Hunt</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'resources/Newstyle.css' %}">
</head>
<body>
{% block body %}
    <div class="container-fluid">
        <nav class="navbar navbar-inverse navbar-default" role="navigation">
            <div class="container-fluid"
                 style="background-color: #003554;position: absolute;top: 0px;right: -15px;width: 1290px;">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <img src="{% static 'images/env.svg' %}" style="width: 45%;padding: 8px">
                </div>
                <button style="font-family:'Trebuchet MS';border-color:white;height: 34px;color: white;font-size: 14px;margin-right: 10px"
                        name="YDocs" class="btn btn-outline-primary">
                    <i class="fas fa-book"></i> Yodlee Docs
                </button>
            </div><!-- /.container-fluid -->
        </nav>
    </div>
    <!-- end container --><br/><br/>
    <div class="container" style="font-family: 'Trebuchet MS'">
        <div class="row">
            <form class="col-md-4">

            </form>
        </div>
    </div>

    <form>
        <div class="form-row" style="font-family: 'Trebuchet MS';font-size: 11px">
            {#            <div class="col">#}
            {#                <input name="Stack" type="text" class="form-control" placeholder="Stack name"#}
            {#                       style="font-size:14px;width: 39%;position: relative;margin-left: 2%;" required>#}
            {#            </div>#}
            <div class="col" style="right: -1%">
                <select id="Stack" name="Stack" class="select2" style="font-family: 'Trebuchet MS'">
                    <option value="" selected disabled hidden>Select Stack</option>
                    <{% for stacks in stack %}
                    <option>{{ stacks }}</option>
                {% endfor %}
                </select>
            </div>
            <div class="col">
                <input id="Exception" name="Exception" type="text" class="form-control"
                       placeholder="Exception string........."
                       style="font-size:14px;width: 90%;position: relative;right: 32%" required>
            </div>
            <div class="col">
                <button id="Hunt"
                        style="font-family:'Trebuchet MS';border-color:white;height: 36px;color: white;font-size: 14px;position: relative;right: 43%;width: 86px;"
                        class="btn btn-primary btn-lg btn-block">
                    Hunt <i class="fas fa-crosshairs"></i>
                </button>
            </div>

            <div class="col">
                <br/><br/><br/>
                <textarea id="textarea"
                          style="font-family:'Courier New';position: relative;left: -307%;width: 405%;background-color: black;color: aliceblue;font-size: 115%;height: 245%"
                          class="form-control"
                          id="exampleFormControlTextarea3" rows="7" disabled> {{ file_content }}</textarea>
            </div>
        </div>
    </form>
    {% block js %}
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"
              rel="stylesheet"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
        <script>
            $('.select2').select2({
                dropdownAutoWidth: true,
                width: '200px'
            });
        </script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>  $(function () {
            $('#Hunt').click(function () {
                console.log("Calleddddd")
                $.ajax({
                    type: "get",
                    url: "/NewHandBook/logger",
                    data: {
                        'Stack': $('#Stack').val(),
                        'Exception': $('#Exception').val(),
                    },
                    success: function (data) {
                        $('textarea').html(data);
                    }
                })
            });
        });</script>
    {% endblock %}
{% endblock %}
</body>
</html>


URL: 
url('logger', views.logger),

查看：

def logger(request):
    stack = request.GET.get('Stack')
    exception = request.GET.get('Exception')
    with open('C:/Users/pvivek/PycharmProjects/HandBook/Log.txt', 'w') as f:
        for item in log:
            f.write("%s\n" % item)
    f = open('C:/Users/pvivek/PycharmProjects/HandBook/Log.txt', 'r')
    file_content = f.read()
    f.close()
    return HttpResponse(file_content)

我注意到在每次提交期间页面都将刷新，下拉菜单也被重置，但是我只是打印了一些随机文本，以确保调用将转到ajax函数和视图。

Django Ajax：无法将数据从我的view方法获取到模板

0 个答案: