潭州课堂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

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

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 之 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">&lt ...
潭州课堂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=& ...

随机推荐

【Spring】SpringMVC入门示例讲解
目录结构: // contents structure [-] SpringMVC是什么 Spring MVC的设计原理 SpringMVC入门示例 1,复制Jar包 2,Web.xml文件 3,My ...
JS Math对象中一些小技巧
JS中快速获取数组中最大/最小值 var a=[1,2,3,5]; alert(Math.max.apply(Math, a));//最大值 alert(Math.min.apply(Math, a) ...
web&period;xml 文件配置01
web.xml 文件配置01 前言:一般的web工程中都会用到web.xml,方便开发web工程.web.xml主要用来配置Filter.Listener.Servlet等.但是要说明的是web. ...
Hibernate 具体代码
package com.shuyinghengxie.doudou; import static org.junit.Assert.*; import java.util.Date; import j ...
CXF之webservice
使用 CXF 做 webservice 简单例子 Apache CXF 是一个开放源代码框架,提供了用于方便地构建和开发 Web 服务的可靠基础架构.它允许创建高性能和可扩展的服务,您可以将这 ...
OpenGL 4 &colon; 一个漂亮的心 For you, My Love
画一个心形有非常多公式能够使用,以下这个公式我觉得最完美了: float x = R * 16 * pow(sin(theta), 3); float y = R * (13 * cos(theta) ...
NOIP2010-普及组初赛C语言解析
第十六届全国青少年信息学奥林匹克联赛初赛试题一.单项选择题 (共20题,每题1.5分,共计30分.每题有且仅有一个正确选项.) 1．2E+03表示( D ). A．2.03 B ...
【easyui】之treegrid的分页
easyui官网给的treegrid的分页是相当的复杂,我们来简化一下! 首先treegrid 分页和 datagrid一样需要设置一系列参数! 如下: depTreeGrid=$("#de ...
Jupyter notebook安装
之前就装了jupyter notebook,但今天打开来发现是python2,并且似乎没法转换到python3??? so,再把python3的版本安装一下打开CMD pip install jup ...
带你走进php大马的结构模块编写之路
本文原创作者:Laimooc 第一部分:前沿综述本次我主要写了[文件的创建].[文件的删除].[文件的上传].[目录浏览].[命令执行]小模块,以及[组合的目录浏览和文件删除功能]的模块: 实验环境 ...