码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-02-12 18:38:07      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:lex   登陆   loop   import   OLE   login   for   ext   pass   

原生态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 and
14         self.get_argument(password) == 123):
15          pass
16         else:
17             dic[status] = False
18             dic[message] = 账号或密码不对
19         import json
20         self.write(json.dumps(dic))
21 
22 settings ={template_path:view,
23            static_path:static
24            }
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

 

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

标签:lex   登陆   loop   import   OLE   login   for   ext   pass   

原文地址:https://www.cnblogs.com/wenxianfeng/p/10366639.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!