向后台提交数据:通过form表单提交数据需刷新网页 但通过Ajax提交数据不用刷新网页可通过原生态Ajax或jqueryAjax。Ajax代码部分

原生态Ajax提交表单:需要借助XMLHttpRequest对象的open,要收通过post发送请求还要setRequsetHeader,然后把数据发送给后端,代码如下

目录结构

index.py代码


 1 #index.py 2 #!/usr/bin/env python 3 #-*- coding:utf-8 -*- 4 import tornado.web 5 import tornado.ioloop 6 class indexHandler(tornado.web.RequestHandler): 7 def get(self, *args, **kwargs): 8 # ff = self.get_argument(‘user‘,None) 9 # print(ff)10 self.render(login.html)11 def post(self, *args, **kwargs):12 dic = {status: True,message:‘‘}13 if (self.get_argument(username) == alex and14 self.get_argument(password) == 123):15 pass16 else:17 dic[status] = False18 dic[message] = 账号或密码不对19 import json20  self.write(json.dumps(dic))21 22 settings ={template_path:view,23 static_path:static24  }25 app = tornado.web.Application([(r"/login",indexHandler)26 ],**settings)27 if __name__ == "__main__":28 app.listen(8000)29 tornado.ioloop.IOLoop.instance().start()

View Code

login.html代码


 1 <!--login.html--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 10 <input id="user" type="text" name="username">11 <input id="pwd" type="password" name="password">12 <!--<input type="checkbox">7天免登陆-->13 <input type="button" value="登陆" onclick="SubmitForm();">14 15 <script src="static/jquery-1.8.2.js"></script>16 <script>17 // xhr = null;18 // function SubmitForm() {19 // xhr = new XMLHttpRequest();20 // xhr.open(‘POST‘,‘/login‘,true);21 // xhr.onreadystatechange = func;22 // xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded;")23 // xhr.send("username="+document.getElementById(‘user‘).value+";password="+document.getElementById(‘pwd‘).value)24 // }25 // function func() {26 // if (xhr.readyState == 4){27 // console.log(xhr.responseText);28 // ret = JSON.parse(xhr.responseText)29 // alert(ret)30 // alert(ret.status)31 // alert(ret.message)32 // }33 // }34 35  $.post(/login,{username:alex,password:1233},function (callback) {36  alert(callback)37  })38 </script>39 </body>40 </html>

View Code

 

相关文章