Python 需要在同一页面中获得输出（使用带有ajax的django模型表单）

我试图重新创造一种情况，最近我遇到了一个简单的例子，如下所示：

我对django使用ajax还不熟悉，这就是我正在尝试做的

我有一个单页“主页”，有两个按钮Form1和Form2；单击其中一个按钮执行ajax调用并获取相应的表单，而无需刷新。我可以使用jquery函数和ajax调用正确地传递get请求，以便在“主页”上显示它，而无需刷新。看起来是这样的：

这些select字段中的每一个都预先填充了django模型值thorugh model.object.createname=name，并且除了pk id之外只有一个字段

如果我从下拉列表和点击过程中选择一个值，它将显示所选字符串的长度，而不会刷新页面，就像切换表单时页面不会刷新一样-->这就是我被击中的地方，我知道我使用的方法是错误的，但不确定如何更正它

有人能帮我完成这个django应用程序的预期用途吗

对不起，整个代码的粘贴长度；为了方便助手，我将文件夹作为公共存储库上载到github：

url.py

models.py

forms.py

views.py

控制器.py

template1.html

template2.html

home.html

在这里，我已经包含了html注释，我想在其中显示所选的字符串长度。还有一个js注释，关于不知道如何编写jquery函数

{% extends 'ajax_demo/base.html' %}

{% block content %}
<div class="container">
    <br>
    <button id="load_form1">Form 1</button>
    <button id="load_form2">Form 2</button>
    <br>
    <br>
    <div id="form_space" style="display:none;"></div>
    <br>
    <div id="output_string_length" style="display:none; ">
        <!-- Here's where I want to get the length of the output(length of the selected string)-->
        <!-- without refreshing the page -->
    </div>
</div>
{% endblock content %}

{% block js %}
<script>
    $(document).ready(function (){

        $(function getForm1(){
            $("#load_form1").click(function (){
                $.ajax({
                    url: "/view1/",
                    type: "GET",
                    data: $("#form1").serialize(),
                    success: function (data){
                        $("#form_space").html(data);
                        $("#form_space").fadeIn("slow");
                    }
                });
            });
        });

        $(function getForm2(){
            $("#load_form2").click(function (){
                $.ajax({
                    url: "/view2/",
                    type: "GET",
                    data: $("#form2").serialize(),
                    success: function (data){
                        $("#form_space").html(data);
                        $("#form_space").fadeIn("slow");
                    }
                });
            });
        });

        // [WHAT DO I WRITE HERE TO BE ABLE TO GET THE LENGTH OF THE SELECTED STRING]
    });
</script>
{% endblock js %}

base.html

---

必须编写另一个视图以获得响应

def view1_response(request):
    name = request.POST.get('selected_name')
    length = get_length(name)
    return render(request, 'ajax_demo/template_response1.html', {'length': length})

将上下文呈现到不同的模板template_response1.html

    <div id="template1_output">
        {{ length }}
    </div>

以及表单元素下面的ajax：

<form method="POST" id="form1" action="{% url 'view1' %}">
    {% csrf_token %}
    <fieldset>
        {{ form }}
    </fieldset>
    <button type="submit" id="submit1">Process</button>
</form>
<script>
    $(function (){
        $("#id_name1").change(function (){
            $.ajaxSetup({
                    headers: { "X-CSRFToken": "{{ csrf_token }}" }
            });
            $("#submit1").click(function (){
                var selectedName = $("#id_name1 option:selected").text();
                $.ajax({
                    type: "POST",
                    url: "{% url 'view1_response' %}",
                    data: {
                        selected_name: selectedName
                    },
                    success: function (data){
                        $("#output").empty();
                        $("#output").html(data);
                        $("#output").fadeIn();
                    }
                });
            });
        });
    });
</script>

Form2也是一样

使用HttpResponseget_length selected_name，我可以在不同的url“view1/”或“view2/”中获得结果，但仍然无法在具有id输出字符串长度的主页元素div中获得结果

def get_length(name):
    return len(str(name))

<form method="POST" id="form1" action="{% url 'view1' %}">
    {% csrf_token %}
    <fieldset>
        {{ form }}
    </fieldset>
    <button type="submit">Process</button>
</form>

<form method="POST" id="form2" action="{% url 'view2' %}">
    {% csrf_token %}
    <fieldset>
        {{ form }}
    </fieldset>
    <button type="submit">Process</button>
</form>

{% extends 'ajax_demo/base.html' %}

{% block content %}
<div class="container">
    <br>
    <button id="load_form1">Form 1</button>
    <button id="load_form2">Form 2</button>
    <br>
    <br>
    <div id="form_space" style="display:none;"></div>
    <br>
    <div id="output_string_length" style="display:none; ">
        <!-- Here's where I want to get the length of the output(length of the selected string)-->
        <!-- without refreshing the page -->
    </div>
</div>
{% endblock content %}

{% block js %}
<script>
    $(document).ready(function (){

        $(function getForm1(){
            $("#load_form1").click(function (){
                $.ajax({
                    url: "/view1/",
                    type: "GET",
                    data: $("#form1").serialize(),
                    success: function (data){
                        $("#form_space").html(data);
                        $("#form_space").fadeIn("slow");
                    }
                });
            });
        });

        $(function getForm2(){
            $("#load_form2").click(function (){
                $.ajax({
                    url: "/view2/",
                    type: "GET",
                    data: $("#form2").serialize(),
                    success: function (data){
                        $("#form_space").html(data);
                        $("#form_space").fadeIn("slow");
                    }
                });
            });
        });

        // [WHAT DO I WRITE HERE TO BE ABLE TO GET THE LENGTH OF THE SELECTED STRING]
    });
</script>
{% endblock js %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    {% block content %}
    {% endblock content %}
    {% block js %}
    {% endblock js %}
</body>
</html>

def view1_response(request):
    name = request.POST.get('selected_name')
    length = get_length(name)
    return render(request, 'ajax_demo/template_response1.html', {'length': length})

    <div id="template1_output">
        {{ length }}
    </div>

<form method="POST" id="form1" action="{% url 'view1' %}">
    {% csrf_token %}
    <fieldset>
        {{ form }}
    </fieldset>
    <button type="submit" id="submit1">Process</button>
</form>
<script>
    $(function (){
        $("#id_name1").change(function (){
            $.ajaxSetup({
                    headers: { "X-CSRFToken": "{{ csrf_token }}" }
            });
            $("#submit1").click(function (){
                var selectedName = $("#id_name1 option:selected").text();
                $.ajax({
                    type: "POST",
                    url: "{% url 'view1_response' %}",
                    data: {
                        selected_name: selectedName
                    },
                    success: function (data){
                        $("#output").empty();
                        $("#output").html(data);
                        $("#output").fadeIn();
                    }
                });
            });
        });
    });
</script>