javascript - 一种形式的多个按钮的 POST Ajax
问题描述
我正在创建一个表单,其中包含计划处理发送 OTPAuth
并Login
在下面分别检查 OTP 是否有效的按钮。
我正在使用下面的代码在 Javascript 中使用多个提交按钮处理表单提交,但是当我得到任何按钮时,javascript 似乎无法正常工作,我无法获得任何console.log
值。浏览器没有错误。
otplogin.html
<div id="otplogin">
<form class="form-horizontal" id="getotp" >
{% csrf_token %}
<div class="control-group">
<label class="control-label" for="username">Username</label>
<div class="controls">
<input type="text" id="username" name="username" placeholder="Username">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" value='auth' class="btn">Auth</button>
</div>
</div>
<div class="control-group">
<label class="control-label" for="otp">OTP</label>
<div class="controls">
<input type="otp" name="otp" id="otp" placeholder="OTP">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" value='login' class="btn">Login</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
(function () { //the browser said the '$' as in the linked answer can not be recognized
$("#getotp btn").click(function (ev) {
ev.preventDefault()
if ($(this).attr("value") == "auth") {
console.log("CHECK 1");
$.ajax({
type:'POST',
url:'/getotp2',
data:{
username:$('#username').val()
,csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
},
success: function server_response(response) {
console.log('POST1 success')
}
});
}
else if ($(this).attr("value") == "login") {
console.log("CHECK 2");
$.ajax({
type:'POST',
url:'/otplogin',
data:{
username:$('#username').val(),
otp:$('#otp').val(),
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
},
success: function server_response(response) {
console.log('POST2 success')
}
});
}
});
});
</script>
视图.py
def otplogin(request):
if request.POST:
otpentered=request.POST.get('otp','')
if otpentered==otp:
return redirect('/main')
return render(request,'esearch/otplogin.html')
def getotp2(request):
logout(request)
username = otp = ''
if request.POST:
username = request.POST.get('username','')
otp = pyotp.TOTP('base32secret3232').now()
OTPEmail('You Auth',username,[],'Your auth is '+otp)
print ('POST'+username)
print ('POST'+otp)
return JsonResponse(json.dumps({'username':username,'otp':otp}),safe=False)
感谢对此的任何帮助
解决方案
你的选择是错误的:
(function(){
$("#getotp btn").click(function (ev){...});}
改成:
$(document).ready(function(){
$(".btn").click(function(ev){...});});
或者
$("#getotp .control-group .controls .btn").click(...
推荐阅读
- project-reactor - 使用 WebClient (Reactor) 时通过 JAXB 的 XML 反序列化问题
- typescript - TypeScript const 断言和声明之间有什么区别?
- javascript - 为什么不能将 onclick 处理程序设置为本机函数?
- javascript - Nodejs无法从html参考中找到图像
- java - 如何从休眠自动 ddl 中排除模式
- python - Cython 类 AttributeError
- graphql - 当我称它为父级时,为什么这个 GraphQL 属性没有按预期返回?
- javascript - 在 redux store 中存储多页表单
- image - 再次查找已审核问题的图像
- java - 如何在 Java 中将 [04/07/19] 转换为 [Sun, 7 Apr]?