潭州课堂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=& ...
随机推荐
- 【vim】自动补全 Ctrl+n
Vim 默认有自动补全的功能.的确这个功能是很基本的,并且可以通过插件来增强,但它也很有帮助.方法很简单. Vim 尝试通过已经输入的单词来预测单词的结尾. 比如当你在同一个文件中第二次输入 &quo ...
- android camera(一)：camera模组CMM介绍【转】
转自:https://blog.csdn.net/kevinx_xu/article/details/8821818 androidcmm图像处理工作手机三星 关键词:android camera ...
- AWTK(Toolkit AnyWhere): 为嵌入式、手机和桌面开发的通用GUI【转】
转自:https://blog.csdn.net/absurd/article/details/80958279 AWTK = Toolkit AnyWhere AWTK是吸取了FTK和CanTK的精 ...
- OA协同办公软件
OA协同办公软件: 泛微软件. 九思软件. 华天动力. 万户OA.:北京万户网络技术有限公司创立于1998年2月,是北京华宇软件股份有限公司(股票简称:“华宇软件”,股票代码:300271)的全资子公 ...
- [BZOJ3295] [Cqoi2011]动态逆序对（带修改主席树）
题目描述 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序 ...
- 几个常用的Node方法
1.写入文件 /** * 写入文件 * @param {string} filePath 文件路径 * @param {string} data 文件内容 * @return {none} */ fu ...
- SeaJS入门教程系列之完整示例（三）
一个完整的例子上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾.这个例子包含如下文件: 1.index.html——主页面.2.sea.j ...
- jquery----data使用
- .data() - .data("key", value) 保存值,value可以是字符串,也可以是数组,也可以是jquery对象- .data("key" ...
- 成员变量传参,jion方法的使用
package charpter06; //MyThread02和MyThread01两个类 相互调用的结果public class MyThread01 extends Thread { // 用全 ...
- checkbox简单例子
写个简单的例子,如下:html页面部分:<input type="checkbox" value="1" name="check"/& ...