Knowledge Point application: Tag binding event, jquery get user value-"Ajax send data-" Background routing system-"business logic processing-" ORM data operation-"write return-" Ajax callback function Receive--"page effect display
First step: We are going to bind an onclick event to the front-end Get Captcha button--Send a message verification code
- Find the Views under home index.html find tags, onclick=sendcode (this)
- Define events, get mailboxes, send AJAX requests
The jquery code is as follows:
function Sendcode (this) { var email = $ (#xiang). Val (); $.ajax ({ URL: '/send_code ', type: ' POST ', data:{em:email}, success:function (ARG) { Console.log (ARG); }, error:function () { } }) }
- After sending the request, the background will receive the data, first to the routing system to configure the URL
- Once configured, the next step is the business logic to find the controllers account to write the Sendcodehandler class
Class Sendcodehandler (Baserequesthandler): def post (Self,*args,**kwargs): #定制信息 ret = {"Status": True, " Data ":", "Error": ""} Email = self.get_argument (' em ', None) if email: #如果有值, generate a random verification code, and send the mailbox code = Commons.randon_code () message.email ([email,],code) #创建session连接 conn = chouti_orm.session () # Generates a temporary table object and writes to the temp table, obj = chouti_orm. Sendcode (Email=email,code=code,stime=datetime.datetime.now ()) conn.add (obj) conn.commit () Self.write (Json.dumps (ret)) else: #如果没有, change False status, add error message ret["status"] = False ret["error"] = "Mailbox Format error" Self.write (Json.dumps (ret))
Class Sendcode (Base): __tablename__ = "Sendcode" #注册时验证码信息 nid = Column (Integer, Primary_key=true, autoincrement=true) email = column (string (+), index=true) code = Column (String (6)) # status = Column ( Integer) #状态码, 0 means unregistered, 1 successful, 2 pull black #验证码的有效时间 stime = Column (TIMESTAMP) #发送时间
- After the Ajax callback function receives the data, the JS processing displays the due effect on the page
Step Two: Click Register, carry the information to verify
- Binds the Submitregister event to the registered label, and binds a specific class to the tag to which the message is to be submitted
- event, register status change, send Ajax request
function Submitregister (THS) {$ (ths). Children (': eq (0) '). AddClass (' hide '); $ (THS). addclass (' Not-allow '). Children (': EQ (1) '). Removeclass (' hide '); Send AJAX Requests//Get all content entered by the user (define a specific class or custom attribute) var post_dict = {} $ (". Regiter_temp"). each ( function () {var input_val = $ (this). Val (); var Name_val = $ (this). attr ("name"); Post_dict[name_val]=input_val; }) Console.log (post_dict); Send Ajax request $.ajax ({URL: "/register", type: "POST", Data:post_dict, Success:function (ARG) {console.log (ARG); ARG is the string var obj = Json.parse (ARG); if (obj.status) {//Registration succeeds---jump (signed in Status--session implementation) Location.href = "/index"; }else{alert (obj.error); }})//Completed after $ (ths). Removeclass (' Not-allow '). Children (': EQ (1) '). AddClass (' hide '); $ (THS). Children (': eq (0) '). Removeclass (' hide '); }
- According to the information submitted by the user to the temporary table (Verification Code table) to filter, registration successful session to save the login status
class Registerhandler (baserequesthandler): Def post (self, *args, **kwargs): ret = {"Status": True, "Data": "", "Error": ""} #获取用户输入的所有内容 #code = Sendcode matches the mailbox #注册 #conn. A DD (obj) #conn. commit () conn = Chouti_orm.session () #创立连接 #根据用户提交过来的验证码和邮箱 to the Temp table to filter r = Conn . query (Chouti_orm. Sendcode). Filter (code=123,email= ' 111 '). First () if not r: #如果没有, return error message ret[' status '] = False ret["error"] = "Mailbox Authenticode Error" Self.write (Json.dumps (ret)) Else: #临时表里有, registration is successful, instance user information object, with new To the UserInfo table, obj = Chouti_orm. UserInfo () conn.add (obj) conn.commit () #session保存用户登陆状态 self.session["Is_login "] = True #保存用户 self.session[' username ') = ' user-entered user name ' Self.write (json.dumps (ret))
- The AJAX callback function receives the data, the registration succeeds jumps to the homepage, and displays the login status
You may have doubts, as if the registration of the mailbox has not been registered to verify, right, here can be in the mailbox of the label definition onblur event-Send an AJAX request, to the background to userinfo the table to detect and return the results can be
Drawer Tornado Combat (3)--register