Question

在我的应用程序中按下提交按钮后，POST请求将被发送到服务器。我想显示加载程序，直到服务器响应。这是我的HTML模板：

{%load static %}
{% load staticfiles %} 
<html>
   <style>
      form {
      }
      input[type=text], input[type=password] {
      width: 30%;
      padding: 12px 20px;
      margin: 12px 0;
      display: inline-block;
      border: 1px solid #ccc;
      box-sizing: border-box;
      }
      button {
      background-color: #35a5f0;
      color: white;
      padding: 14px 20px;
      margin: 6px 0;
      border: none;
      cursor: pointer;
      width: 30%;
      }
      button:hover {
      opacity: 0.8;
      }
      .cancelbtn {
      width: auto;
      padding: 10px 18px;
      background-color: #f44336;
      }
      .container {
      padding: 16px;
      }
      span.psw {
      float: right;
      padding-top: 16px;
      }
      /* Change styles for span and cancel button on extra small screens */
      @media screen and (max-width: 300px) {
      span.psw {
      display: block;
      float: none;
      }
      .cancelbtn {
      width: 100%;
      }
      }
   </style>
   <body>
      <div style="display: flex; justify-content:center;">
         <img src = "{% static 'logo.png' %}" width="150" height="100">
         <img src = "{% static 'Timesheets.png' %}" width="150" height="100">
      </div>
      <form action="/new_user/" method="post">
         <div class="container">
            <div style="display: flex; justify-content:center;">
               <input type="text" placeholder="Enter valid Email ID" name="email_id" required>
            </div>
            <div style="display: flex; justify-content:center;">
               <button type="submit">Submit</button>
            </div>
         </div>
         <div style="display: flex; justify-content:center;">
            <p> {{status}}</p>
         </div>
         <div style="display: flex; justify-content:center;">
            <span class="psw"> <a href="/login_page/">Login Page</a></span>
         </div>
         <div style="display: flex; justify-content:center;">
            <span class="psw"> <a href="/forgot_passwd/">Forgot password? </a></span>
         </div>
      </form>
   </body>
</html>

这是我的view.py：

from django.http import HttpResponse
from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt
from django.contrib.auth.models import User
from send_email import send_email
from delete_all_user import delete_all_user
import os, random, string

@csrf_exempt

def index(request):
        if request.POST:
                email_id = request.POST['email_id']
                print email_id
                user_name = str(email_id.split("@")[0])
                if '.' in user_name:
                                print "Dot present"
                                user_name = user_name.replace('.','_')
                print user_name

                if not (User.objects.filter(username = user_name).exists()):
                        user = User.objects.create_user(user_name)
                        user_password = get_random_password()
                        user.set_password(user_password)
                        user.email = request.POST['email_id']
                        user.save()
                        print "User not exists"
                        print dir(user)
                        if send_email("Use bleow credentials to login:"+"<br>"+"<br>"+"Username: "+request.POST['email_id']+"<br>"+"Password: "+user_password+"<br>",request.POST['email_id']):
                                        return render(request, 'new_user.html', {"status":"Not a valid CommScope email address"})
                        return render(request, 'new_user.html', {"status":"Email has been sent on "+request.POST['email_id'] + ".Please check your inbox"})
                else:
                        return render(request, 'new_user.html', {"status":"User already exists..."})
        else:
                return render(request, 'new_user.html', {})

def get_random_password():
        length = 13
        chars = string.ascii_letters + string.digits + '!@#$%^&*()'
        random.seed = (os.urandom(1024))
        return(''.join(random.choice(chars) for i in range(length)))

我想在按下提交按钮之后和接收状态字符串之前添加加载程序。该怎么做？是否只能使用HTML？请帮忙。

Django，HTML：提交帖子请求后显示加载器

0 个答案: