潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)
js 《——》jq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>一</div>
<div>二</div>
<div>三</div> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script> // JQ --> JS
var $div = $('div'); //JQ 对象
var div0 = $('div')[0]; // JS 对象
var div1 = $('div').get(1); // JS 对象 // js --> jq
var div = document.getElementsByTagName('div');
var $divs = $(div);
</script>
</body>
</html>
this 特殊选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--<style>-->
<!--div{-->
<!--color: ;-->
<!--}-->
<!--</style>-->
<body>
<div>一二三四</div> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$('div').click(function () {
var $div = $(this);
$div.css('color','yellow') // 特殊选择器指的是当前元素
})
</script>
</body>
</html>
each
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1aa</li>
<li>2bb</li>
<li>3cc</li>
<li>4dd</li>
</ul> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script> // JQ 里的 each 方法
// $.each(['a','b','c'],function(i,n){
// console.log(i+':'+n); //类似 for 循环
// }); var $ul = $('li');
$.each($ul,function (i,li) {
console.log($(li).text()); // JQ 依次拿到 li 中的文字
console.log(li.innerText); // JS 依次拿到 li 中的文字
}) $.each($ul,function () {
console.log($(this).text()); // JQ 依次拿到 li 中的文字
console.log(this.innerText); // JS 依次拿到 li 中的文字
}) </script>
</body>
</html>
json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script> // json
var user = {
'name':'aa',
'gae':18,
'hobby':'sing'
};
// 读
console.log(user.name);
//写
user.name = 'bb'
console.log(user.name); // 迭代
for (var key in user) {
console.log(key+':'+user[key]);
} // json ---> 字符串
var str = JSON.stringify(user); //{"name":"bb","gae":18,"hobby":"sing"} string
console.log(str,typeof (str)) // 字符 串 ----》 json
var obj = JSON.parse(str);
console.log(obj);
</script>
</body>
</html>
form 表单
前后台的交互，
前台代码 命名为‘form-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/text" method="post">
<p>用户名：<input type="text" name="user" placeholder="请输入用户名" ></p>
<p>密 码：<input type="password" name="psw" placeholder="请输入密码" ></p>
<input type="submit" value="提交">
</form> </body>
</html>
后台代码 命名为 app.py
# -*- coding:utf-8 -*-
# 斌彬电脑
# @Time : 2018/8/10 0010 上午 9:42
'''
这里的内容是 按住 ctrl点 web 复制 25---》37行内容
''' import tornado.ioloop # pip install tornado
import tornado.web class MainHandler(tornado.web.RequestHandler):
def get(self):
# self.write("Hello, world")
self.render('form-1.html') # 后台到前台 form-1.html def post(self, *args, **kwargs): # 创建 post 方法
print('用户名：', self.get_argument('user')) # 后台 获取前台的信息
self.write('登录成功') # 交到前台， if __name__ == "__main__":
application = tornado.web.Application([
(r"/text", MainHandler),
])
application.listen(8888)
tornado.ioloop.IOLoop.current().start()
Ajax
照上述代码
输入 ：http://127.0.0.1:8888/text
Ajax 前后 台交互实例应用
前台代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1> json + JQ 实现 Ajax</h1>
<input type="text" name="a">+
<input type="text" name="b">=
<input type="text" name="c">
<button id="btn">计算</button>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
var $in = $('input');
$('button').click(function(){
var x = $in.eq(0).val(); // JQ 方法
// var a = $in[0].valid; // JS 方法
var y = $in.eq(1).val(); // JQ 里的 ajax 方法
$.ajax({
'type':'post', // 指定传送方法
'url':'/text' , // 传送位置
'data':{
'a':x,
'b':y
},
'success':function(data) { // 回调函数
console.log(data); // 后台传过来的数据
var c = data['res'];
$in.eq(2).val(c);
}
})
});
</script>
</html>
后台代码
import tornado.ioloop # pip install tornado
import tornado.web class MainHandler(tornado.web.RequestHandler):
def get(self):
# self.write("Hello, world")
self.render('ajax+jq.html') # 后台到前台 form-1.html def post(self, *args, **kwargs): # 创建 post 方法
# print( self.get_argument('a')) # 后台 获取前台的信息
# print( self.get_argument('b')) # 后台 获取前台的信息
# self.write('登录成功') # 交到前台，
a = self.get_argument('a')
b = self.get_argument('b')
c = float(a)+float(b)
data = {'res':c} # 前台要接收 json 这里要构造成为 json
self.write(data) if __name__ == "__main__":
application = tornado.web.Application([
(r"/text", MainHandler),
])
application.listen(8888)
tornado.ioloop.IOLoop.current().start()
潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)的更多相关文章
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第二课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第一课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 jQuery 第七课 (课堂笔记)
jq 的导入 <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">< ...
- 潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)
上节补充方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 潭州课堂25班：Ph201805201 WEB 之 JS 第五课 (课堂笔记)
算数运算符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)
JS 引入方式 在 HTML 中写入 写在 的标签里 <script> </script>推荐 放在 </body> 结束之前 <!DOCTYPE html& ...
- 潭州课堂25班：Ph201805201 WEB 之 CSS 第三课 (课堂笔记)
在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...
- 潭州课堂25班：Ph201805201 mongo数据 库 第八课 (课堂笔记)
mongo 进入数据库, exit 退出 show dbs 查数据库 db.createCollection('stu') 创建一个集合, > use binbinswitched to ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第四课 登录注册 (课堂笔记)
index.html 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
随机推荐
- Linux命令学习总结：date命令【转】
本文转自:http://www.cnblogs.com/kerrycode/p/3427617.html 命令简介: date 根据给定格式显示日期或设置系统日期时间.print or set the ...
- TCP/IP指纹鉴别 fingerprint
http://www.freebuf.com/articles/system/30037.html使用TCP/IP协议栈指纹进行远程操作系统辨识 Fyodor <fyodor@insecure. ...
- 解决Myeclipse启动Spring Boot项目报出莫名异常
有时候明明代码.配置都是正确的,但是一启动却报出莫名其妙的异常. 主要原因是resource包下的xml.yml文件或者其他配置文件路径不正确,解决方法如下: 第一步. 第二步.如果Excluded不 ...
- PYTHON-TCP 粘包
1.TCP的模板代码 收发消息的循环 通讯循环 不断的连接客户端循环 连接循环 判断 用于判断客户端异常退出(抛异常)或close(死循环) 半连接池backlog listen(5) 占用的是内存空 ...
- UITableView滑动性能优化扩展
一点UITableView滑动性能优化扩展 影响UITableView的滑动,有哪些因素呢? 关于这一点,人眼能识别的帧率是60左右,这也就是为什么,电脑屏幕的最佳帧率是60Hz. 屏幕一秒钟会刷 ...
- 浏览器的userAgent归纳
IE IE6 User-Agent:Mozilla/4.0 (Windows; MSIE 6.0; Windows NT 5.2) IE7 User-Agent:Mozilla/4.0 (compat ...
- poj3410单调队列（单调栈）
思路:求每个人的左使者就是从左到右把每个人加入到单调队列中去,加入时最后一个出队的就是那个最大的小于这个数的数 求右信使同理 由于本题的单调队列队头不需要出队,所以其实是一个单调栈 /* 每个人只要找 ...
- OpenLdap的加密md5（Java+Python，同时提供明文-->密文，md5(名文)-->密文两种方法）
# slappasswd -h {md5} -s "secret"{MD5}Xr4ilOzQ4PCOq3aQ0qbuaQ== import base64 import hashli ...
- SpringMVC后台token防重复提交解决方案
本文介绍如何使用token来防止前端重复提交的问题. 目录 1.思路 2.拦截器源码实现 3.注解源码 4.拦截器的配置 5.使用指南 6.结语 思路 1.添加拦截器,拦截需要防重复提交的请求 2.通 ...
- android app 流量统计
https://blog.csdn.net/yzy9508/article/details/48300265 | android 数据流量统计 - CSDN博客https://blog.csdn.ne ...