Question

我是Django的新手。我正在尝试创建一个具有两个输入文本框的网站。单击提交按钮后，我需要将django视图的结果更新为相同的模板，而无需重新加载网页。

到目前为止，这是我的代码： index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<H1>Welcome to Test</H1>

<div class="input-group" >
   Input Text:<br>
 <textarea class="form-control" rows="20" cols="70"  name="InputText" 
  placeholder="Enter your Input Text here" form="myForm">
 </textarea>
 <span class="input-group-addon"><br></span>
Input TextFSM Template:<br>
<textarea class="form-control" rows="20" cols="70"  name="InputTemplate" 
 placeholder="Enter your template here" form="myForm">
</textarea>
<form  action="" method="post" id="myForm">
    {% csrf_token %}
<input type="submit" value="Submit">
</form>
</div>
<div id="resultid">
<p>Result:</p>
{{result}}
</div>
</body>
</html>

views.py

class HomePageView(TemplateView):
template_name = "index.html"

def get(self, request, **kwargs):
    form = ParserForm()
    return render(request, self.template_name, {"form": form})

def post(self, request, **kwargs):
    form = ParserForm(request.POST)

    if form.is_valid():
        inputtext = form['InputText'].value()
        template = form['InputTemplate'].value()
        # Process the data and get the result
        print(result)
        return render(request, self.template_name, {'result': result})

如何将结果从视图传递到index.html，但在文本框中输入的文本应保持不变。

Answer 1

在不重新加载页面的情况下，没有直接方法可以在django模板或django视图中更新结果。此外，一旦页面渲染完毕，您就需要再次请求更新该页面。您可以使用 jquery ajax 从服务器获取数据而无需重新加载页面。

Ajax是异步javascript扩展，用于发送请求而无需重新加载页面。这将帮助您完全按照自己的意愿去做。

您可以从here那里获得更多帮助

有关实例，请参见以下示例。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<body>
<H1>Welcome to Test</H1>

<div class="input-group" >
   Input Text:<br>
 <textarea class="form-control" rows="20" cols="70"  name="InputText" 
  placeholder="Enter your Input Text here" form="myForm">
 </textarea>
 <span class="input-group-addon"><br></span>
Input TextFSM Template:<br>
<textarea class="form-control" rows="20" cols="70"  name="InputTemplate" 
 placeholder="Enter your template here" form="myForm">
</textarea>
<form id="my-form" action="" method="post" id="myForm">
    {% csrf_token %}
<input type="submit" value="Submit">
</form>
</div>
<div id="resultid">
<p>Result:</p>
{{result}}
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    (function($){
        function processForm( e ){
            $.ajax({
                url: '/url-to-call/',    //replace this with url that you want to hit without reloading the page
                dataType: 'text',
                type: 'post',
                contentType: 'application/x-www-form-urlencoded',
                data: $(this).serialize(),
                success: function( data, textStatus, jQxhr ){
                    // manipulate stuff or action
                },
                error: function( jqXhr, textStatus, errorThrown ){
                     // This is executed when some error occures
                }
            });

            e.preventDefault();
        }

        $('#my-form').submit( processForm );
    })(jQuery);</body>
</html>

将值从Django视图传递到同一模板

1 个答案: