如何在 DJango 中停止页面重新加载 ajax jquery

Posted 2023-02-21

【中文标题】如何在 DJango 中停止页面重新加载 ajax jquery

【英文标题】：How to stop page reload ajax jquery in DJango

【发布时间】：2020-03-11 14:23:23

【问题描述】：

所以我在 Django 中编写了我的第一个 ajax jquery 代码。它工作正常。我正在通过 ajax 格式发送数据并成功查看功能，它创建了我真正想要创建的内容。但问题是页面正在重新加载，我不想这样做。我想要一条警报消息来显示何时传递数据。

我的表格：

 <form action="" method="post" id="register">
     % csrf_token %
  <div class="container">
    <h1>Register</h1>
      % if messages %
      % for message in messages %
                       <div class="alert alert- message.tags  alert-dismissible fade show" role="alert">
                           <strong>Hello ap!</strong>  message 
                       <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                       <span aria-hidden="true">&times;</span>
                       </button>
                       </div>
            % endfor %
      % endif %

    <hr>
      <label for="text"><b>Username</b></label>
      <input type="text" id="username" name="username" placeholder="required"  required>
       <label for="email"><b>Email</b></label> <br>
      <input type="text" id="email" name="email" placeholder="required" required > <br> <br>
      <label for="Password"><b>Password</b></label> <br>
      <input type="password"id="password" name="password"placeholder="required" required>
      <label for="ConfirmPassword"><b>Confirm Password</b></label>
      <input type="password" id="password1" name="password1" placeholder="required" required>


    <hr>
    <button type="submit" onclick="register" id="btn-submit"  class="btn-submit">Register</button>
  </div>

  <div class="container signin">
    <p>Already have an account? <a href="#">Sign in</a>.</p>
  </div>
</form>

我的 Ajax 代码：

<script>
    $(document).on('register',function(e)
    e.preventDefault();
    $.ajax(
      type : 'POST',
      url : 'register',
      data : 
           username : $('#username').val(),
           email    :$('#email').val(),
           password : $('#password').val(),
           password1: $('#password1').val(),
      ,
      success:function()
        alert("Created New User");
      
    )
    )
    </script>

还有我的视图功能：

def sign_up(request):
    if request.method == "POST":
        username = request.POST['username']
        email = request.POST['email']
        password = request.POST['password']
        password1 =request.POST['password1']

        if password == password1:
            if User.objects.filter(username = username).exists():
                messages.warning(request,"username taken")
                return render(request,'accounts/register.html')
            elif User.objects.filter(email =email).exists():
                messages.warning(request,"email taken")
                return render(request,'accounts/register.html')
            else:
                user = User.objects.create_user(username = username, email = email, password = password)
                user.save()
                messages.success(request,"user created successfull")
                print("user created")
                return redirect('login')
                return HttpResponse('')
        else:
            messages.warning(request,"Password not matched")
            print(messages)
            return render(request,'accounts/register.html')

    else:
        return render(request,'accounts/register.html')

我做错了什么？我现在该怎么办？帮帮我，好人。

谢谢。

【参考方案1】：

$('#btn-submit').click(function(e) 
    e.preventDefault()
    // create user code
);

并删除onclick="register"。

您可以使用和提交表单事件（这对我来说更好，因为它将事件绑定到表单，而不是将点击事件绑定到按钮）：

 $("#register").on("submit", function(e)
    e.preventDefault();
   //Code: Action (like ajax...)
 )