I've been attempting to implement Ajax to locally load the page, but unfortunately, the code below isn't functioning as expected. My intention is to transmit the 'MSG' information from 'views' to Ajax and refresh the page locally without having to reload the entire page. If the input doesn't comply with the specified requirements, the front end should reject the submission and display an appropriate error message.
views.py
def login(request):
hashkey = CaptchaStore.generate_key()
image_url = captcha_image_url(hashkey)
captcha = {'image_url': image_url, 'hashkey':hashkey}
if request.POST:
username = request.POST['username']
password = request.POST['password']
key = request.POST['hashkey']
capt = request.POST['captcha']
if username and password:
if captchautil.is_valid(capt, key):
user = auth.authenticate(username=username, password=password)
human = True
if user:
auth.login(request, user)
return redirect('/')
else:
msg = 'Incorrect Username or Password'
else:
msg = 'Please enter a valid captcha'
else:
msg = 'Please enter both username and password'
return render(request, 'login.html', locals())
return render(request, 'login.html', locals())
login.html
{% block content %}
<div id="login" class="login">
<form action="/login/" method="post" class="navbar-form">
{% csrf_token %}
<div id="input" class="form-group">
<input type="username" name="username" class="form-control" placeholder="Enter your phone number or email address" id='user' title="Enter your phone number or email address"><br><br>
<input type="password" name="password" class="form-control" placeholder="Password" id='pwd' title="Enter your password"><br><br>
<img src="{{image_url}}" alt='Captcha' id='id_captcha'>
<span><a href="#" id="refresh_captcha">Can't read the captcha? Refresh</a></span>
<br>
<input id='captcha' placeholder="Enter the captcha" name="captcha" class="form-control" type="text" data-toggle="tooltip" data-placement="bottom" title="Enter the captcha">
<input value="{{hashkey}}" type="hidden" name="hashkey" id='hashkey'>
<br>
<button type="submit" class="btn btn-primary form-control" name="click" id='click'>Login</button>
<p style="margin-left: auto;" id="msg">{{ msg }}</p></div>
</form>
<div style="margin-left: 3%">
<span>
<a href="">Forgot your password?</a>
</span>
<span style="margin-left: 3%"><a href="/regist/">Free Registration</a></span>
</div>
</div>
{% endblock %}
{% block lastscript %}
<script type="text/javascript">
$(document).ready(function(){
//Refresh captcha
$('#refresh_captcha').click(function(){
$.getJSON("/refresh_captcha/", function(result){
$('#id_captcha').attr('src', result['image_url']);
$('#hashkey').val(result['hashkey'])
});
});
});
$(function(){
$("#click").submit(function(){
var username = $("#user").val();
var password = $("#pwd").val();
var captcha = $("#captcha").val();
var key = $("#hashkey").val();
$(this).ajaxSubmit({
type:'post',
url: '/login/',
dataType: 'text',
data:{'username':username, "password":password, "capt":captcha, "key":key},
success:function(msg){
$("#msg").html(msg);
}
});
return false;
})
})
</script>
{% endblock %}
If you have any insights on where the issue might be arising, I would greatly appreciate your assistance