向后台提交数据:通过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‘ 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()

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>

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

时间: 2024-08-10 16:16:24

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

如何把整张表格的数据通过form表单的方式传回后台

开发背景: 前段时间遇到这么一个需求,就是把一整张表格的数据存储在数据库中,之后再渲染在页面中,还可以进行重新编辑. 例如下边的课程表(为了方便,所以都是软件工程). 我也是经过一段时间的思考,才实现了整个功能. 思考过程: 思考过程中,想过用ajax,感觉还是太麻烦了,放弃. 第二个,是找网上现成的接口,比如表单大师之类的...但是找来找去找不到,没有符合要求的接口.放弃. 第三个,想到python万能的包来实现,还是相信python的包是万能的23333,百度来百度去,找不到.放弃. 最后还

jQuery通过ajax获得后台json数据给form表单赋值

jQuery提供了load方法可以将数据加载到页面form表单中,但有时候我需要获取后台json数据中某个值时,又需要赋值整个form表单,load方法没有回调函数所以就不行了,如果用ajax调用的话,获得后台json数据后把json数据分析出来在一个个的赋值到form表单的每个文本框中,这样未免太过复杂和太多代码,所以我根据了一些大神的回答,总结了一个很好用的jQuery函数. jQuery-load方法调用: $('#form').form('load',URL); 页面表单: <span

js总结(11)一个页面同时提交多个form表单的实施

父页面的代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Index</title> <script src="js/jquery-1.9.min.js"></script> </head> <body> &

layui提交弹出页面的form表单

使用layui后台框架,无法从弹出页面调用到父页面的方法,因此一些刷新父表单表格的操作无法完成(单独打开列表页面,再弹出页面可以调用到父页面的方法),只能从父页面操作提交子页面的表单信息 1. 父页面 1.1 html <button type="button" class="layui-btn layui-btn-sm" id="add">新增用户</button> 1.2 相关js // 绑定新增用户事件 $(&quo

js获取form表单数据和form表单赋值

$.fn.extend({// 调用方式:$("xxxxx").getform(); getform: function () { var obj = {}; var array = $(this).serializeArray(); $.each(array, function () { obj[this.name] = this.value; }); return obj; }, // 调用方式: $("xxx").setform(json); setform:

form表单提交数据编码方式和tomcat接受数据解码方式的思考

http://blog.sina.com.cn/s/blog_95c8f1ac010198j2.html ******************************************************* form有2中方法把数据提交给服务器,get和post,分别说下吧. (一)get提交 1.首先说下客户端(浏览器)的form表单用get方法是如何将数据编码后提交给服务器端的吧. 对于get方法来说,都是把数据串联在请求的url后面作为参数,如:http://localhost:

js阻止form表单重复提交

防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单处理完毕清空或者修改session中的token. 在js中处理简单易懂,同时能解决我现在所做的项目中的问题,目前暂用js处理,后期如有需要再研究token机制.代码如下: 1.表单提交后禁用提交按钮(在本项目中表单提交完成后,如果处理成功都把form表单关掉了) 1 /** 2 * form表单格

SpringMVC中使用bean来接收form表单提交的参数时的注意点

这是前辈们对于SpringMVC接收表单数据记录下来的总结经验: SpringMVC接收页面表单参数 springmvc请求参数获取的几种方法 下面是我自己在使用时发现的,前辈们没有记录的细节和注意点: 使用bean来接收form表单提交的参数时,pojo中必须含有默认的(即空的)构造函数,同时,需要设置到bean中的变量必须有setter方法. 注:以下代码均为示例代码,非本人实际运行代码,请自行补充. 例如:我有一个bean类是User,具有变量username和password.同时,表单

Jquery form表单提交

起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器的兼容性的. 1.序列化form,通过Ajax提交 $.ajax({ cache: false, type: "POST", url: "readImage.do", data: $('#ff').serialize(), //序列化表单数据 async: true,

通过php jq ajax 提交form表单

参考http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2013/0619/13568.html html <div id="contact_form"> <form name="contact" method="post" > <label for="name" id="name_label">姓名</label