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

目录结构

index.py代码

 #index.py

 #!/usr/bin/env python

 #-*- coding:utf-8 -*-

 import tornado.web

 import tornado.ioloop

 class indexHandler(tornado.web.RequestHandler):

     def get(self, *args, **kwargs):

         # ff = self.get_argument('user',None)

         # print(ff)

         self.render('login.html')

     def post(self, *args, **kwargs):

         dic = {'status': True,'message':''}

         if (self.get_argument('username') == 'alex' and

         self.get_argument('password') == ''):

          pass

         else:

             dic['status'] = False

             dic['message'] = '账号或密码不对'

         import json

         self.write(json.dumps(dic))

 settings ={'template_path':'view',

            'static_path':'static'

            }

 app = tornado.web.Application([(r"/login",indexHandler)

                                ],**settings)

 if __name__ == "__main__":

     app.listen('')

     tornado.ioloop.IOLoop.instance().start()

login.html代码

 <!--login.html-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input id="user" type="text" name="username">

     <input id="pwd" type="password" name="password">

     <!--<input type="checkbox">7天免登陆-->

     <input type="button" value="登陆" onclick="SubmitForm();">

     <script src="static/jquery-1.8.2.js"></script>

     <script>

         // xhr = null;

         // function SubmitForm() {

         //     xhr = new  XMLHttpRequest();

         //     xhr.open('POST','/login',true);

         //     xhr.onreadystatechange = func;

         //     xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded;")

         //     xhr.send("username="+document.getElementById('user').value+";password="+document.getElementById('pwd').value)

         // }

         // function func() {

         //       if (xhr.readyState == 4){

         //          console.log(xhr.responseText);

         //          ret = JSON.parse(xhr.responseText)

         //           alert(ret)

         //           alert(ret.status)

         //           alert(ret.message)

         //       }

         // }

         $.post('/login',{'username':'alex','password':'1233'},function (callback) {

             alert(callback)

         })

     </script>

 </body>

 </html>

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

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

    开发背景: 前段时间遇到这么一个需求,就是把一整张表格的数据存储在数据库中,之后再渲染在页面中,还可以进行重新编辑. 例如下边的课程表(为了方便,所以都是软件工程). 我也是经过一段时间的思考,才实现 ...

  2. 结合Bootbox将后台JSON数据填充Form表单

    本文介绍了如何结合Bootbox将后台JSON数据填充到Form表单中,同时也介绍了一些需要使用的知识的学习途径,并附上了参考文档地址与学习网址,对此感兴趣的伙伴可以直接访问学习.为了方便介绍,使用了 ...

  3. django 使用form组件提交数据之form表单提交

    django的form组件可以减少后台在进行一些重复性的验证工作,极大降低开发效率. 最近遇到一个问题: 当使用form表单提交数据后,如果数据格式不符合后台定义的规则,需要重新在前端页面填写数据. ...

  4. jquery获取form表单内容以及绑定数据到form表单

    在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使 ...

  5. 表单提交中记得form表单放到table外面

    帝国后台按栏目搜索文章时怎么都不生效  控制台查看原来是 栏目的select的值没有提交过去,原来由于form标签在table标签里面,导致js生成的<select>标签提交失败. 解决办 ...

  6. layui form表单 input输入框获取焦点后 阻止Enter回车自动提交

    最简单的解决办法,不影响其他操作,给提交按钮增加 type="button" 属性 完美解决 <button type="button" class=&q ...

  7. form表单，登录用户，密码，按钮，提交、重置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js中大数据量form表单卡顿问题解决

    转载大神: http://www.mamicode.com/info-detail-1773696.html

  9. 关于AJAX与form表单提交数据的格式

    一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...

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

    http://blog.sina.com.cn/s/blog_95c8f1ac010198j2.html *********************************************** ...

随机推荐

  1. Aseprite+Cocos：打包像素画图，导入到cocos里并动起来

    前言:Aseprite入门教程            Aseprite入门:第一个gif动图 1.制作像素画: 按照上一次的小球跳动制作过程,先制作一个像素画动画: 若是导出gif动态图,效果如下: ...

  2. Python中的高级变量类型

    高级变量类型 目标 列表 元组 字典 字符串 公共方法 变量高级 知识点回顾 Python 中数据类型可以分为 数字型 和 非数字型 数字型 整型 (int) 浮点型(float) 布尔型(bool) ...

  3. 访问iis 出现500.19错误

    解决方案: 原因是asp应用程序没有打开,于是就在控制面板--程序---打开和关闭windows功能---internet信息服务----万维网服务------应用程序开发功能中选中全部 可能接下来会 ...

  4. 【新手向】使用nodejs抓取百度贴吧内容

    参考教程:https://github.com/alsotang/node-lessons 1~5节 1. 通过superagent抓取页面内容 superagent .get('http://www ...

  5. 开发十年，只剩下这套Java开发体系了 原

    蓦然回首自己做开发已经十年了,这十年中我获得了很多,技术能力.培训.出国.大公司的经历,还有很多很好的朋友.但再仔细一想,这十年中我至少浪费了五年时间,这五年可以足够让自己成长为一个优秀的程序员,可惜 ...

  6. mysql 开发进阶篇系列 2 SQL优化(explain分析)

    接着上一篇sql优化来说 1. 定位执行效率较低的sql 语句 通过两种方式可以定位出效率较低的sql 语句. (1) 通过上篇讲的慢日志定位,在mysqld里写一个包含所有执行时间超过 long_q ...

  7. 【教程】在UEFI启动方式下，通过GRUB2引导，直接从硬盘ISO文件安装Windows10和Ubuntu双系统

    本文为作者原创,允许转载,但必须注明原文地址: https://www.cnblogs.com/byronxie/p/9949789.html 动机 最近在自学MIT6.828 Operating S ...

  8. 2014-2015 ACM-ICPC, Asia Xian Regional Contest（部分题解）

    摘要 本文主要给出了2014-2015 ACM-ICPC, Asia Xian Regional Contest的部分题解,说明了每题的题意.解题思路和代码实现,意即熟悉区域赛比赛题型. Built ...

  9. Perl复制、移动、重命名文件/目录

    File::Copy复制文件 File::Copy模块提供了copy函数和cp函数来复制文件,它们参数上完全一致,但行为上稍有区别. 用法大致如下: use File::Copy qw(copy cp ...

  10. 翻译：XtraDB/InnoDB中的AUTO_INCREMENT处理方式(已提交到MariaDB官方手册)

    本文为mariadb官方手册:XtraDB/InnoDB中的AUTO_INCREMENT处理方式的译文. 原文:https://mariadb.com/kb/en/auto_increment-han ...