一、前端构建表单,为每个input标签添加name 属性,设置method,action(前端代码使用的是bootstrap框架)
<form id="register" action="/memsave/" method="post" style="display: none"> <div class="form-group"> <table class="table"> <tbody> <tbody> <tr><td style="line-height: 25px;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;">真实姓名</td><td colspan="2"><input name="register_name" type="text" style="line-height: 25px;border: none;outline:none" placeholder="请输入您的名字" required></td></tr> <tr><td style="line-height: 25px;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;">联系方式</td><td ><input name="register_tel" style="line-height: 25px;border: none;outline:none" type="tel" minlength="11" maxlength="11" placeholder="请输入手机" required></td><td><a style="margin-left: -15px;line-height: 25px;font-size:0.7em;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;">获取验证码</a></td></tr> <tr><td style="line-height: 25px;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;">现在住址</td><td colspan="2"><input name="register_address" type="text" style="line-height: 25px;border: none;outline:none" placeholder="请输入住址" required></td></tr> <tr><td style="line-height: 25px;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;">所属单位</td><td colspan="2"><input name="register_company" type="text" style="line-height: 25px;border: none;outline:none" placeholder="请输入公司/学校/企业/机构" required></td></tr> <tr><td style="line-height: 25px;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;">密码设置</td><td colspan="2"><input name="register_pswd" type="password" style="line-height: 25px;border: none;outline:none" placeholder="请输入密码" required></td></tr> <tr><td style="line-height: 25px;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;">确认密码</td><td colspan="2"><input name="register_pswd1" type="password" style="line-height: 25px;border: none;outline:none" placeholder="请再一次输入密码" required></td></tr> <tr><td style="line-height: 25px;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;">常用邮箱</td><td colspan="2"><input name="register_email" type="email" style="line-height: 25px;border: none;outline:none" placeholder="请输入邮箱" required></td></tr> <tr><td colspan="3"><input style="border: none" type="radio" name="read" required>已阅读平台注册协议并同意注册 </td></tr> </tbody> </table> <button class="btn btn-success" type="submit" style="margin: 0 20% 0 20%;width: 60%" οnclick="registerid_submit()">注册</button> </div> <!--<div class="row" style="text-align: center"><span id="regresponse"></span> <a id="regresponse1" style="margin-top:15px" οnclick="login()">返回登录界面</a></div>--> </form>
二、后台处理数据并存入数据库当中,存储成功后return Httprespnse(如有疑问,请前往了解django的通信机制)
#注册信息提交,如果成功返回sucess 如果失败返回fial def mem_save(request): try: if request.method=="POST": user_name = request.POST.get("register_name", None) telephone = request.POST.get("register_tel",None) address = request.POST.get("register_address",None) company = request.POST.get("register_company",None) pswd = request.POST.get("register_pswd",None) email = request.POST.get("register_email",None) database.memRigister(user_name,telephone,address,company,pswd,email) return render(request, "YRSWKJ2.0/memcontroller.html", {'answer': 'no', "msg": "注册成功,请点击登录"}) except: return render(request, "YRSWKJ2.0/memcontroller.html", {'answer': 'no', "msg": "注册失败,点击重新注册"})
提交的数据包含在request请求中,后台获取数据,调用database.py 存储数据的函数进行数据存储