Django JQuery AJAX submit form Запрос POST обновляет страницу

Question

У меня есть форма для входа в систему, для которой я хочу, чтобы клиент отправил запрос AJAX POST, как показано ниже, с обработкой ошибок. В случае ошибок проверки/аутентификации я не загружаю страницу или не обновляю ее до URL-адреса, соответствующего обработчику запроса POST (/users/login/) с строкой JSON, полученной от ответа login. Я попытался использовать event.preventDefault(), как было предложено многими ответами на SO, но не смог заставить его работать. Какой-нибудь намек на то, что здесь происходит не так? Я не думаю, что это проблема Django. Я знаю, что onsubmit является triggerred, потому что окно перенаправляет на URL обработчика POST /users/login/ с ожидаемым JSON строки ответа - {"error": ["Entered mobile number is not registered"]}

JQuery код

$("#loginform").on('submit', function(event) { 
      event.preventDefault(); 
      alert("Was preventDefault() called: " + event.isDefaultPrevented()); 
      console.log("form submitted!"); 
      var url = "https://stackoverflow.com/users/login/"; 

      $.ajax({ 
       type: "POST", 
       url:url, 
       data: $("#loginform").serialize(), 
       success: function(data) 
       { 
        console.log(data); 
        var result = JSON.stringify(data); 
        if(result.indexOf('errors')!=-1){ 
         console.log(data); 
         if(data.errors[0] == "Mobile number and password don't match") 
         { 
          $('.login-error').text("Mobile number and password don't match"); 
         } 

         else if(data.errors[0] == "Entered mobile number is not registered") 
         { 
          $('.login-error').text("Entered mobile number is not registered"); 
         } 

        } 

        else 
        { 
         window.open("https://stackoverflow.com/users/profile/"); 
        } 

        //var result = JSON.stringify(data); 
        // console.log(result); 

       } 
      }) 

    }); 

Посмотреть Handler

def login(request): 
    if request.method == 'POST': 
     mobile_number = request.POST.get('mobile_number', '') 
     password = request.POST.get('password', '') 

     data = {} 

     user_queryset = User.objects.filter(mobile_number=mobile_number) 

     if len(user_queryset) == 0: 
      data['error'] = [] 
      data['error'].append("Entered mobile number is not registered") 
      # return JsonResponse(data) 

     elif len(user_queryset) == 1: 
      email = user_queryset[0].email 

      user = auth.authenticate(email=email, password=password) 

      if user is not None: 
       auth.login(request, user) 

      else: 
       data['error'] = [] 
       data['error'].append("Mobile number and password don't match") 

     return JsonResponse(data) 

Код HTML

<div class="container-fluid bg-primary" id="login"> 
     <div class="row"> 
      <div class="col-lg-3 text-center"> 
      </div> 
      <div class="col-lg-6 text-center"> 
      <h1>&nbsp;</h1><h3>&nbsp;</h3> 
       <h2 class="section-heading">Login to your profile</h2> 
       <hr> 
      </div> 
      <div class="col-lg-3 text-center"> 
      </div> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
     </div> 
     <div class="col-md-4 col-md-offset-4 "> 
      <form id='loginform' action='/users/login/' method='post' accept-charset='UTF-8'> 
      {% csrf_token %} 
       <fieldset > 
        <div class="form-group"> 
         <input type="text" name="mobile_number" id="mobile_number" tabindex="1" class="form-control" placeholder="Mobile Number" value=""> 
        </div> 
        <div class="form-group"> 
         <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Enter Password"> 
         </div> 
       </fieldset> 
       <button type="submit" class="btn btn-primary btn-xl btn-block">LOG IN</button><br><br> 
       <span class="login-error"></span> 
       <h1>&nbsp;</h1><h1>&nbsp;</h1> 
      </form> 
     </div> 
    </div> 

Answer 1

В дополнение к event.preventDefault();, это может быть хорошей идеей, также называют event.stopPropagation() в этом случае.

Answer 2

Использование: 'event.preventDefault()' или 'return false' после вызова ajax.