原生态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. HTTP 协议中 GET 和 POST 方法详解

    GET请求报文分析 1.请求行 请求方法 GET(描述该请求采用了什么请求方法),HTTP 1.0 和 1.1 协议中共包含10种请求方法.不过 HTTP 1.1 中只有8种方法. URI 请求WEB ...

  2. 全栈开发工程师微信小程序 - 上

    全栈开发工程师微信小程序-上 实现swiper组件 swiper 滑块视图容器. indicator-dots 是否显示面板指示点 false indicator-color 指示点颜色 indica ...

  3. 深度学习环境配置:Ubuntu16.04安装GTX1080Ti+CUDA9.0+cuDNN7.0完整安装教程（多链接多参考文章）

    本来就对Linux不熟悉,经过几天惨痛的教训,参考了不知道多少篇文章,终于把环境装好了,每篇文章或多或少都有一些用,但没有一篇完整的能解决我安装过程碰到的问题,所以决定还是自己写一篇我安装过程的教程, ...

  4. vue脚手架中使用axios

    虽然之前用过n次,但大多都是直接在页面中引入axios.js的.今天想换种方式使用,一时间竟不知道怎么配置了.特此记录下. 1.npm 安装axios,文件根目录下安装,指令如下:  npm inst ...

  5. 用python自制微信机器人，定时发送天气预报

    0 引言 前段时间找到了一个免费的天气预报API,费了好段时间把这个API解析并组装成自己想用的格式了,就想着如何实现每天发送天气信息给自己.最近无意中发现了wxpy库,用它来做再合适不过了.以下是w ...

  6. 《JQuery技术内幕》读书笔记——自调用匿名函数剖析

    Javascript语言中的自调用匿名函数格式如下: (function(){ //do somethings })(); 它还有另外两种等价写法如下: //等价写法一 (function(){ // ...

  7. Ansible系列之roles使用说明

    roles(角色)介绍 ansible自1.2版本开始引入的新特性,用于层次性,结构化地组织playbook.roles能够根据层次型结构自动装载变量文件.tasks以及handlers等.要使用ro ...

  8. mysql 开发基础系列19 触发器

    触发器是与表有关的数据库对象,触发器只能是针对创建的永久表,而不能是临时表. 1.1 创建触发器 -- 语法: CREATE TRIGGER trigger_name trigger_time tri ...

  9. android项目架构 -----Android 知识体系与常用第三方框架

    好东西值得分享 ,这是网络上总结的一些开源的东西直接就拿过来了  .... Android通用流行框架大全 先把这张图放在这 ,先来谈一谈项目结构 .我喜欢将东西按模块来划分: 都知道module . ...

  10. python 加密算法及其相关模块的学习（hashlib,random,string,math）

    加密算法介绍 一,HASH Hash,一般翻译做“散列”,也有直接音译为”哈希”的,就是把任意长度的输入(又叫做预映射,pre-image),通过散列算法,变换成固定长度的输出,该输出就是散列值.这种 ...