潭州课堂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 --> JSvar $div = $('div');            //JQ 对象var div0 = $('div')[0];         // JS 对象var div1 = $('div').get(1);     // JS 对象// js --> jqvar 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>// jsonvar 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"} stringconsole.log(str,typeof (str))// 字符 串 ----》 jsonvar 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.webclass MainHandler(tornado.web.RequestHandler):def get(self):# self.write("Hello, world")self.render('form-1.html')      #  后台到前台  form-1.htmldef 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.webclass MainHandler(tornado.web.RequestHandler):def get(self):# self.write("Hello, world")self.render('ajax+jq.html')      #  后台到前台  form-1.htmldef 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 这里要构造成为 jsonself.write(data)if __name__ == "__main__":application = tornado.web.Application([(r"/text", MainHandler),])application.listen(8888)tornado.ioloop.IOLoop.current().start()

转载于:https://www.cnblogs.com/gdwz922/p/9452777.html

潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)相关推荐

潭州课堂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 mongo数据库第八课 (课堂笔记)
mongo 进入数据库, exit 退出 show dbs 查数据库 db.createCollection('stu') 创建一个集合, > use binbin switched to ...
潭州课堂25班：Ph201805201 第十课类的定义，属性和方法 (课堂笔记)
类的定义共同属性,特征,方法者,可分为一类,并以名命之 class Abc: # class 定义类, 后面接类名 ( 规则首字母大写 ) cls_name = '这个类的名字是Abc' # 在类 ...
潭州课堂25班：Ph201805201 WEB 之 CSS 第二课 (课堂笔记)
CSS 的引入方法: 第一种 : <p style="color: yellow">CSS的第一种引入方法</p> ...
潭州课堂25班：Ph201805201 爬虫基础第一课 (课堂笔记)
爬虫的概念: 其实呢,爬虫更官方点的名字叫数据采集,英文一般称作spider,就是通过编程来全自动的从互联网上采集数据. 比如说搜索引擎就是一种爬虫. 爬虫需要做的就是模拟正常的网络请求,比如你在网站 ...
潭州课堂25班：Ph201805201 爬虫基础第六课选择器 (课堂笔记)
HTML解析库BeautifulSoup4 BeautifulSoup 是一个可以从HTML或XML文件中提取数据的Python库,它的使用方式相对于正则来说更加的简单方便,常常能够节省我们大量的时间 ...
潭州课堂25班：Ph201805201 django 项目第一课 (课堂笔记)
一.Django 现状 1.Django开发前景 1.1 老师做过的项目项目图展示: 1.2 Django的厉害之处在python中,与web开发环境相关的包有13045个 django就占了 ...
潭州课堂25班：Ph201805201 爬虫基础第十五课 js破解二 (课堂笔记）
PyExecJs使用 PyExecJS是Ruby的ExecJS移植到Python的一个执行JS代码的库. 安装 pip install PyExecJS 例子 >>> import ...

潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)

潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)相关推荐

最新文章

热门文章