如何在不刷新的情况下提交表单并显示输出答案

【问题标题】：how to submit a form and display output without refreshing如何在不刷新的情况下提交表单并显示输出
【发布时间】：2022-01-25 00:56:29
【问题描述】：

我正在尝试创建一个简单的计算器，它从用户那里获取输入数字并在其下方显示计算的输出。该代码工作正常，但显然它重定向并重新加载页面。我不希望用户填写表单后立即显示输出。我对 js 和 ajax 的了解为 0，所以我很感谢你们帮助我完成这部分。我搜索了很多，但不知道该怎么做。这是我的表格：

<form id="myform" method="POST">
    {% csrf_token %}
    Enter first number: <input type="text" name="num1"><br><br>
    <input type="submit">
</form>

这是我想要的形式下面的输出：

<h1>congrats!</h1>

就这么简单。填写表单，提交并显示一条简单的消息，无需刷新

【问题讨论】：

创建一个简单的计算器 - 如果您的计算器没有从您的服务器获取任何数据并且计算简单，那么您可以使用 javascript在客户端，但如果您想从服务器获取数据，则必须使用 Ajax

标签： javascript django ajax

【解决方案1】：

如果您的知识为零并且无法生成任何代码，您很可能会面临很多问题，AJAX 与 Django 表单是另一个复杂级别，除非您 100% 确定会为用户体验添加一些东西，否则不会实施，但简而言之。

使用 Jquery，您可以构建 Ajax 调用 到 Django 视图：

JS 脚本：

 $(document).ready(function () {
      $("form").submit(function (event) {
        var formData = {
          justification: $("#justification").val(),
          

        };
    
        $.ajax({
          type: "POST",
          url: "{% url 'django-view'  %}",
          data: formData,
          dataType: "json",
          encode: true,
        }).done(function (data) {
          
          if (data.success) {
            console.log("error");
    
         
          } else {
           # display your text somewhere in your page
          }
        });
    
        event.preventDefault();
      });
    });

Django 视图：

@csrf_exempt
def form_post(request):
    # Do something with your data
    text = request.POST.get("num1")
    print(text)
    return JsonResponse({"text": text})

正如您所见，使用 Ajax 需要更多知识，您需要对 Django 表单有很好的理解，对 Ajax 和 JS 有足够的了解，最后是异步的工作原理。

【讨论】：