以下是我的代码，我想通过ajax去实现给手机发送短信，但页面显示报错，问题在哪里，我该如何更改？
前端代码
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1,user-scalable=no">
<title>注册</title>
{% load static %}
<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css'%}">
<link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css'%}">
<link rel="stylesheet"
href="{% static 'plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css'%}">
</head>
<body>
<div class="account">
<h2 style="text-align:center;">用户注册</h2>
<form method="POST" style="margin-top:20px;" novalidate>
{% csrf_token %}
{% for field in form %}
{% if field.name == 'code' %}
<div class="form-group" style="margin-top:20px;">
<label> {{ field.label}}</label>
<div class="clearfix">
<div class="col-md-6" style="padding:0;">{{field}}</div>
<div class="col-md-6"><input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码"></div>
</div>
<span class="error-msg" style="color:red;position:absolute"></span>
</div>
{% else %}
<div class="form-group" style="margin-top:20px;">
<label> {{ field.label}}</label>
{{field}}
<span class="error-msg" style="color:red;position:absolute"></span>
{% endif %}
{%endfor%}
<div>
<input style="height:35px;width:200px; margin-left:90px; font-size:17px;" type="submit" value="注册"
class="btn btn-info">
</div>
<div>
<span style="float: right; margin-top:20px;">已有账号.<a style=" text-decoration:none;" href=" ">去登录</a ></span>
</div>
</div>
</form>
</div>
<script src="{% static 'js/jquery-3.5.1/jquery-3.5.1.min.js'%}"></script>
<script>
//页面加载完自动执行函数
$(function(){
bindClickBtnSms();
});
//点击获取验证码的按钮绑定事件
function bindClickBtnSms(){
$('#btnSms').click(function(){
$(".error-msg").empty();
//获取用户输入的手机号
var mobile=$('#id_mobile').val();
//发送ajax请求
$.ajax({
url:"/send/sms/",
type:"GET",
data:{mobile: mobile,tpl: "register"},
dataType: 'json',
success:function(res){
//ajax请求发送成功后，自动执行函数
if (res.status){
sendSmsRemind();
}else{
//错误信息
$.each(res.error,function(key,value){
$('#id_'+key).next().text(value[0]);
})
}
}
})
})
}
//倒计时
function sendSmsRemind() {
var $smsBtn=$('#smsBtn');
$smsBtn.prop('disabled',true); //禁用
var time =60;
var remind=setInterval(function (){
$smsBtn.val(time + '秒重新发送');
time=time-1;
if (time<1){
clearInterval(remind);
$smsBtn.val('点击获取验证码').prop('disabled',false);
}
},1000)
}
</script>
</body>
</html>
后端代码
class SendSmsForm(forms.Form):
mobile = forms.CharField(label="手机号", validators=[RegexValidator(r'^(1[3|4|5|6|7|8|9])\d{9}$', '手机号格式错误'), ])
def __init__(self, request, *args, **kwargs):
super().__init__(*args, **kwargs)
self.request = request
def clean_mobile(self):
"""手机号校验的勾子"""
mobile = self.cleaned_data['mobile']
# 判断短信模板是否有问题
tpl = self.request.GET.get('tpl')
template_id = settings.TENCENT_SMS_TEMPLATE.get(tpl)
if not template_id:
raise ValidationError("短信模板错误")
# 校验数据库中是否已有手机号
exist = models.Username.objects.filter(mobile=mobile).exists()
if exist:
raise ValidationError('手机号已存在')
# 发短信 & 写redis
code = random.randrange(100000, 999999)
sms = send_sms_single(mobile, template_id, [code, ])
if sms['result'] != 0:
raise ValidationError("短信发送失败,{}".format(sms['errmsg']))
# 验证码写入redis
conn = get_redis_connection()
conn.set(mobile, code, ex=60)
return mobile
def send_sms(request):
"""发送短信"""
form = SendSmsForm(request, data=request.GET)
# 校验手机号,不能为空
if form.is_valid():
return JsonResponse({'status': True})
return JsonResponse({'status': False, 'error': form.errors})
def register(request):
"""注册"""
form = RegisterModelForm()
return render(request, 'register.html', {'form': form})
# 短信模板
# 腾讯云短信应用 app_id
TENCENT_SMS_APP_ID = 1400302209
# 腾讯云短信应用 app_key
TENCENT_SMS_APP_KEY = '8cc5bf076454953306eb668187930004'
# 腾讯云短信签名内容
TENCENT_SMS_SIGN = "Python之路"
TENCENT_SMS_TEMPLATE = {
'register': 548760,
'login': 548762}
