Question

我有一个带登录模式的页面。单击登录按钮时，模式将显示一个表单。当用户键入无效凭据时，它会根据需要发布错误，但是当用户键入有效凭据并且我重定向模式时会保持打开状态。即使我渲染另一页，模态也会保持打开状态。

<!doctype html>
{% load staticfiles %}
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Freelance Student</title>
  <link rel="stylesheet" href="{% static 'css/normalize.css'%}">
  <link rel="stylesheet" href="{% static 'css/style.css'%}" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{% static 'css/jquery.remodal.css' %}">
</head>
<body>
  <header class="site-header">
    <div class="container">
      <div class="site-logo two">
        <img src="{% static 'img/logo.png' %}" alt="">
      </div>

      <nav role="navigation" class="nav-collapse">
        <ul class="site-nav">
        <li><a href="#">Talent Search</a></li>
        <li><a href="#">Employers</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#modal">Login</a></li>
        <li><a href="#modal2" class="button green">Create a profile</a></li>
      </ul>
    </nav>
    <div class="remodal" data-remodal-id="modal">
      <div class="login">
        <div class="favicon"><img src="{% static 'img/favicon.png' %}" /></div>
        <div class="login-iner">
          <form id="login" action="" method="post">
              {% csrf_token %}
            {{login_form.as_p}}
            <input type="submit" value="Login" />
          </form>
        </div>
        <p>Forgot username/password? <span class="lspan"><a href="#">Click here</a></span></p>
      </div>
    </div>
    <div class="remodal" data-remodal-id="modal2">
      <div class="logot">
        <div class="favicon"><img src="images/favicon.png" /></div>
        <h1>Complete the form to build your profile</h1>
        <div class="logot-iner">
          <form>
          <p>
            My name is &nbsp;&nbsp;
            <input type="text" placeholder="first name" />
            &nbsp;&nbsp;
            <input type="text" placeholder="last name" />
            and I am a  &nbsp;&nbsp;<span class="type">
            <input type="text" placeholder="student type" />
            </span> &nbsp;&nbsp; Student
            <br />
            <br />
            I am completing a  &nbsp;&nbsp; <span class="type">
            <input type="text" placeholder="degree type" />
            </span> &nbsp;&nbsp; degree at<br />
            <span class="type1">
            <input type="text" placeholder="uni/college" />
            </span>
            <br />
            <br />
            I study/studied &nbsp;&nbsp; <span class="type2">
            <input type="text" placeholder="degree subject" />
            </span> &nbsp;&nbsp;and I
            am currently in my &nbsp;&nbsp;<span class="type">
            <input type="text" placeholder="select year" />
            </span> &nbsp;&nbsp; year.
            <br />
            <br />
            DOB: &nbsp;&nbsp; <span class="type3"><input type="text" placeholder="DD" /></span>&nbsp;&nbsp;
             <span class="type3"><input type="text" placeholder="MM" /></span> &nbsp;&nbsp;
              <span class="type3"><input type="text" placeholder="YYYY" /></span> &nbsp;&nbsp;
            <br />
            <br />
            My primary skill area is &nbsp;&nbsp; <span class="type">
            <input type="text" placeholder="skill area" />
            </span> &nbsp;&nbsp;<br />
            <br />
            <span class="lspan1">You must be at least 18 years of age to join</span><br />
            <br />
            <input type="submit" value="Sign up" />
          </p>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- /.container -->
</header>
<!-- /.site-header -->
  {% block content %} {% endblock %}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="{% static 'js/vendor/responsive-nav.min.js' %}"></script>
  <script src="{% static 'js/main.js' %}"></script>
  <!--<script src="{% static 'js/base.js' %}"></script>-->
  <script src="{% static 'js/vendor/jquery.min.js' %}"></script>
  <script src="{% static 'js/jquery.remodal.js' %}"></script>

</body>
</html>

我的观点：

def index(request, show_login=False):
    login_form = LoginForm()
    if request.method == 'POST':
        login_form = LoginForm(request.POST)
        if login_form.is_valid():
            email = request.POST.get("email", "")
            password = request.POST.get("password", "")

            user = authenticate(username=email, password=password)

            if user is not None:
                auth.login(request, user)
                return redirect('/')
            else:
                return redirect('/')
        else:
            login_form.add_error(None, "No user found!")
    return render(request, 'freelancestudent/general/index.html', {'login_form': login_form,
                                                                   'show_login': show_login})

我尝试根据用户是否匹配来发送JsonResponse和{'status': 'true'}，但是当我这样做时会将页面重定向到返回的字符串而不是陷入我的AJAX请求的成功方法

{'status': 'false'}

AJAX请求是否可行？

Answer 1

你应该关闭自己。来自：https://github.com/VodkaBears/Remodal#methods 查看inst.close();方法

POST请求后关闭模式

1 个答案: