9-ajax

2024-02-29 15:53:04

lesson09-ajax

视频1-回顾

-------------------------------------------------------
视频2-动画+补充
1-隐藏和显示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             height:200px;
 9             width:200px;
10             background: #52a6f7;
11             margin-bottom:20px;/*底外间距20px*/
12         }
13     </style>
14 </head>
15 <body>
16     <div></div>
17     <button>隐藏效果</button>
18     <button>显示效果</button>
19     <button>toggle效果</button>
20     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
21     <script>
22         var $btn=$("button");//获取button对象
23         var $obj=$("div");//获取div对象
24         $btn.eq(0).click(function () {
25             $obj.hide(5000);//点击按钮5秒内隐藏div图像，fast
26         });
27         $btn.eq(1).click(function () {
28             $obj.show(5000);//点击按钮5秒内显示div图像
29         });
30         $btn.eq(2).click(function () {
31             $obj.toggle(2000);//点击按钮2秒内切换隐藏/显示div图像
32         });
33     </script>
34 </body>
35 </html>

-------------------------------------------------------
2-淡入淡出

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             height:200px;
 9             width:200px;
10             background: #52a6f7;
11             margin-bottom:20px;/*外间距20px*/
12         }
13     </style>
14 
15 </head>
16 <body>
17     <div></div>
18     <div></div>
19     <div></div>
20     <button>淡出效果</button>
21     <button>淡入效果</button>
22     <button>toggle效果</button>
23     <button>fadeTo效果</button>
24     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
25     <script>
26         var $obj=$("div");//获取div对象
27         var $btn=$("button");//获取button对象
28         $btn.eq(0).click(function(){
29             $obj.fadeOut(5000);//点击后button5秒内div图像淡出效果
30         });
31         $btn.eq(1).click(function(){
32             $obj.fadeIn(5000);//点击后button5秒内div图像淡入效果
33         });
34         $btn.eq(2).click(function(){
35             $obj.fadeToggle(5000);//点击后button5秒内div图像切换淡入/淡出效果
36         });
37         $btn.eq(3).click(function(){
38             $obj.eq(0).fadeTo(2000,0.15);//div[0]图像0.15透明度
39             $obj.eq(1).fadeTo(2000,0.4);
40             $obj.eq(2).fadeTo(2000,0.7);
41         });
42     </script>
43 </body>
44 </html>

-------------------------------------------------------
3-滑动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin:0;/*全局外间距0*/
 9             padding:0;
10         }
11         h3{
12             height:50px;
13             width:200px;
14             text-align: center;/*文本居中*/
15             line-height: 50px;/*统一高度*/
16             background: #e8dede;
17             border-bottom:1px solid gray;/*灰色边框*/
18         }
19         p{
20             height:200px;
21             width:200px;
22             /*background: #e8dede;*/
23             background: skyblue;
24             text-align: center;/*文本居中*/
25             line-height: 200px;/*统一高度*/
26         }
27     </style>
28 </head>
29 <body>
30     <h3>点击下滑或者收起来</h3>
31     <p>同学们,晚上好!!</p>
32     <button>显示</button>
33     <button>toggle</button>
34     <button>stop效果</button>
35     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
36     <script>
37         $btn=$("h3");//获取h3标签对象
38         $btn1=$("button");//获取button对象
39         $obj=$("p");//获取p标签对象
40         $btn.click(function(){
41             // $obj.slideUp(2000);//点击h3标签2秒内p标签图像收起
42             $obj.slideToggle(2000);//点击h3标签2秒内p标签图像切换收起/下滑
43         });
44         $btn1.eq(0).click(function(){
45             $obj.slideDown(2000);//点击button[0]对象2秒内p标签图像下滑
46         });
47          $btn1.eq(1).click(function(){
48             $obj.slideToggle(2000);//点击button[1]对象2秒内p标签图像切换收起/下滑
49         });
50          $btn1.eq(2).click(function(){
51              $obj.stop();//点击button[2]对象后停止--p标签图像收起/下滑
52          });
53     </script>
54 </body>
55 </html>

-------------------------------------------------------
4-animate动画
https://www.w3school.com.cn/jquery/jquery_animate.asp 　　 //案例网站

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             height:200px;
 9             width:200px;
10             background: #52a6f7;
11             position:relative;/*子级绝对地位，脱离文档，浮动*/
12         }
13     </style>
14 </head>
15 <body>
16     <div></div>
17     <button>自定义动画</button>
18     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
19     <script>
20         $btn=$("button");//获取button对象
21         $obj=$("div");//获取div对象
22         $btn.click(function () {
23             $obj.animate({      //动画效果
24                     "left":"70px",  //点击button后---移动到左边距20px
25             });
26         });
27             $btn.dblclick(function () {
28         $obj.animate({      //动画效果
29                 "left":"0px",  //双击恢复
30         });
31     });
32     </script>
33 </body>
34 </html>

-------------------------------------------------------
5-jq和js互相转换

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div>元素一</div>
 9     <div>元素二</div>
10     <div>元素三</div>
11     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
12     <script>
13         //jq转换成js
14         //1.利用数组下标
15         //获取jq对象
16         var $div = $("div");
17         //转换为js对象
18         var div=$div[0];
19         //检验
20         div.style.color="red"; //设置css样式：div元素一字体变红
21 
22         //2.jq自带get方法
23         //获取jq对象
24         var $div = $("div");
25         //转换为js对象
26         var div = $div.get(1);
27         //检验
28         div.style.color="blue";//设置css样式：div元素二字体变蓝
29 
30         //js转换成jq
31         //获取js对象
32         var div=document.getElementsByTagName("div");
33         //转换为jq对象
34         var $div=$(div);
35         //检验
36         $div.eq(2).css("font-size","30px");//设置div[2]元素三字体大小
37     </script>
38 </body>
39 </html>

-------------------------------------------------------
6-this 当前对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             height:100px;
 9             width:100px;
10             background: #52a6f7;
11             margin-bottom:20px;/*底外间距20px*/
12         }
13     </style>
14 </head>
15 <body>
16 
17     <div>我就是我</div>
18     <div>你就是-----------</div>
19     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>  <!--网页导入jquery-->
20     <script>
21         // var div=document.getElementsByTagName("div");
22         // div[0].onclick=function(){
23         //     console.log(this.innerText);
24         // }
25         var $div=$("div");  //获取jq的div对象
26         $div.click(function () {
27             console.log($(this).text());//打印当前对象文本
28         })
29     </script>
30 </body>
31 </html>

-------------------------------------------------------
7-each效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <ul>
 9         <li>1</li>
10         <li>2</li>
11         <li>3</li>
12         <li>4</li>
13     </ul>
14 
15     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
16     <script>
17         $objs=$("li");//获取jq的li对象
18         $.each($objs,function(i,obj){//每循环一次i自增1，obj=$objs[i]
19             console.log($(obj).text());//打印对象文本
20         });
21         $.each($objs,function(){//每循环一次,this=$objs[i]
22             console.log('-------------')
23             console.log($(this).text());
24         });
25     </script>
26 </body>
27 </html>

-------------------------------------------------------
1，全称 Ansync JavaScript and XML，是一门异步的加载技术，局部刷新
2，Ajax的使用分为原生和jq两种，需要掌握的jq的，原生了解就行
3，异步加载，可以在不重载整个网页的前提下，进行局部刷新

视频3-前后台交互+ajax
15分钟：安装tornado
//代码：index.html，Ajax1.html，app.py，__init__.py

-----------------------------------
8-json数据处理：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
 9     <script>
10         //创建json数据，object类
11         var usr={
12             "name":"xiaoming",
13             "age":18,
14             "hobby":"sing"
15         };
16         //可读可写
17         console.log(usr.name);//xiaoming
18         usr.name="haha";
19         console.log(usr.name);//haha
20 
21         //遍历
22         for(var key in usr){
23             console.log(key+":"+usr[key]);//打印name:haha ，age:18， hobby:sing
24         }
25 
26         //json数据转字符串
27         var str=JSON.stringify(usr);
28         console.log(str);   //'{"name":"haha","age":18,"hobby":"sing"}'
29         console.log(typeof str);//string
30 
31         //字符串转json数据
32         var obj=JSON.parse(str);
33         console.log(obj);   //{name: "haha", age: 18, hobby: "sing"}
34         console.log(typeof obj);//object
35 
36     </script>
37 </body>
38 </html>

-------------------------------------------------------------
//代码：index.html，Ajax1.html，app.py，__init__.py
//前后台交互网页端和本地端的数据显示

#index.html代码：登录界面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--登录页面-->
 9     <!--form表单，提交方式post-->
10     <form action="/index" method="post">
11         <p>用户名:<input type="text" name="usr" placeholder="请输入用户名"></p>
12         <p>密&emsp;码:<input type="password" name="psw" placeholder="请输入密码"></p>
13         <p><input type="submit" value="提交"></p>
14     </form>
15 </body>
16 </html>

------------------------------------------
//Ajax1.html代码:数值计算

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         input{
 8             display: inline-block;/*行内元素块级显示*/
 9             width:50px;/*宽度*/
10         }
11     </style>
12 </head>
13 <body>
14 
15     <h1>Json+jQuery实现Ajax请求</h1>
16     <input type="text" name="a">+
17     <input type="text" name="b">=
18     <input type="text" name="c">
19     <button>计算</button>
20     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
21     <script>
22         var $inp=$("input");//获取js的input标签对象
23         var $btn=$("button");//获取js的button标签对象
24 
25         $btn.click(function () {
26             var a=$inp.eq(0).val();//点击button后获取input[0]值给a
27             var b=$inp.eq(1).val();//点击button后获取input[1]值给b
28 
29        //ajax格式
30        $.ajax({
31            "type":"post",   //post方法
32            "url":"/index",
33            //data是前台往后台传的数据
34            "data":{
35                "a":a,   //构造json数据，
36                "b":b
37            },
38            "success":function (data1) {     //data1是后台传回来的数据
39                // console.log(data1);   //打印{result:25}
40                res=data1["result"];     //把data1中键为result的值25给res
41                // console.log(res);
42                $inp.eq(2).val(res);//给input[2]标签赋值
43            }
44        });
45 
46        });
47     </script>
48 </body>
49 </html>

------------------------------------------

//app.py代码:前后台交互

 1 import tornado.ioloop
 2 import tornado.web
 3 
 4 #index主页
 5 class MainHandler(tornado.web.RequestHandler):
 6     def get(self):
 7         # self.write("Hello, world")
 8         # self.render("index.html")   #跳转至index登录页面
 9         self.render("Ajax1.html")   #跳转至Ajax1登录页面
10 
11 
12     def post(self):
13         # self.write("Hello, world")
14         #例子1--登录index网页
15         # print(self.get_argument("usr"))   #打印用户账户
16         # print(self.get_argument("psw"))   #打印用户密码
17         # self.write('登录成功')
18 
19         #例子2--ajax1数值计算
20         a = self.get_argument("a")  #获取网页a参数的值--input[0]
21         b = self.get_argument("b")
22         res = float(a) + float(b)  # 计算结果
23         return_data = {"result": res}   # 构造json数据
24         self.write(return_data)
25 
26 
27 if __name__ == "__main__":
28     # 路由器
29     application = tornado.web.Application([
30         (r"/index", MainHandler),   #运行后访问游览器：http://127.0.0.1:8000/index
31     ])
32     application.listen(8000)
33     tornado.ioloop.IOLoop.current().start()

------------------------

效果

------------------------
例子1
#1，运行：app.py,
#2，在游览器访问:http://127.0.0.1:8000/index
#3,输入用户名和密码
#4，显示---登录成功

------------------------------------------
例子2
#1，运行：app.py,
#2，在游览器访问:http://127.0.0.1:8000/index
#3,输入需要计算的数：12+13
#4，点击button计算得到结果：25

------------------------------------------------------------------------------------------

总结：

ajax：
1，jq动画：
    隐藏和显示：
            $obj.hide("slow/fast"/1000);
            $obj.show("slow/fast"/1000);
            $obj.toggle("slow/fast"/1000);
    淡入淡出：
            $obj.fadeOut("slow/fast"/1000);
            $obj.fadeIn("slow/fast"/1000);
            $obj.fadeToggle("slow/fast"/1000);
            $obj.fadeTo("slow/fast"/1000);
        滑动：
            $obj.slideDown("slow/fast"/1000);
            $obj.slideUp("slow/fast"/1000);
            $obj.slideToggle("slow/fast"/1000);
            $obj.stop();
        animate({"":"","":""});
            
2,补充知识点：
    jq和js转换：
        jq-->js:a.下标b.get(下标）
        js-->jq:$(js)
    
    this:
        js:this;
        jq:$(this)
        
    each:
        $.each($objs,function(i,obj){......});  //obj=$objs[i];
        #.each($objs,function(){......});  //this=#objs[i];
        
3,json:
    创建：var usr={"k1":"v1","":"",......}    
    可读可写:usr.k1/usr.k1="v2";
    遍历：for(var key in usr){usr[key]}
    和字符串相互转换：
            json-->字符串：json.stringfy(usr)
            字符串-->json:jsonparse(str)

4,通过form表单实现前后台的交互：
    
5，ajax:
        $.ajax({
            "type":"get/post",
            "url":"",
            "data":{"a":a,"b":b},
            "success":function(data){
                    //data是后台传回的数据
                    
                                    }
                });
                                    
        $.post/get({
            "url":"",
            "data":{"a":a,"b":b},
            "success":function(data){
                        //data是后台传回的数据
                    
                                    }
                });

码农公寓

相关文章