2017-10-25上

nizp · Oct 25, 2017 · c5c183d · c5c183d
1 parent 5e0fc37
commit c5c183d
Show file tree

Hide file tree

Showing 26 changed files with 837 additions and 0 deletions.
diff --git a/2017-10-25/1_小复习（函数封装）.html b/2017-10-25/1_小复习（函数封装）.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <input type="text" id="user">
+<script>
+    var index = 0;
+
+    user.onblur = function(){
+        var onOff = true;
+        ajax({
+            data:{
+                user:user.value
+            },
+            url:'php/get_async.php',
+            // url:'php/data.xml',
+            dataType:'str',
+            success:function(data){
+                onOff = false;
+                console.log(data);
+            },
+            asyn:true
+        });
+        if(onOff){
+            index++; 
+        }
+        alert(index);
+    } 
+
+    function ajax(json){
+        var opt = {
+            url:'',
+            method:'get',
+            success:function(){},
+            fail:function(){},
+            dataType:'json',
+            data:{},
+            asyn:true
+        }
+
+        for(var attr in json){
+            opt[attr] = json[attr];
+        }
+
+        var arr = [];
+        for(var attr in opt.data){
+            arr.push(attr + '=' + opt.data[attr]);
+        }
+
+        opt.data = arr.join('&');
+
+        var ajax = new XMLHttpRequest;
+
+        if(opt.method == 'get'){
+            ajax.open('get',opt.url+'?'+opt.data,opt.asyn);
+            ajax.onreadystatechange = fn;
+            ajax.send();
+        }else if(opt.method == 'post'){
+            ajax.open('post',opt.url);
+            ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
+            ajax.onreadystatechange = fn;
+            ajax.send(opt.data);
+        }
+         function fn(){
+            if(ajax.readyState === 4){
+                if(ajax.status >= 200 && ajax.status <= 207){
+                    if(opt.dataType === 'json'){
+                        opt.success(eval('('+ ajax.responseText +')'));
+                    }else if(opt.dataType === 'xml'){
+                        opt.success(ajax.responseXML);
+                    }else if(opt.dataType === 'str'){
+                        opt.success(ajax.responseText);
+                    }
+                }else{
+                    opt.fail(ajax.status);
+                }
+            }            
+        }
+
+    }   
+
+
+
+
+</script>
+</body>
+</html>
diff --git a/2017-10-25/2_找朋友.html b/2017-10-25/2_找朋友.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <input type="text" value="小明" id="user">
+    <input type="button" value="查询" id="search">
+    <ul id="ul"></ul>
+<script src="ajax.js"></script>
+<script>
+    var search = document.getElementById('search');
+    search.onclick = function(){
+        ajax({
+            url:'php/ajax.php',
+            data:{
+                user:user.value
+            },
+            success:function(data){
+                if(data.code === 0){
+                    var d = data.data;
+                    ul.innerHTML = `我的名字叫${d.name},年龄为${d.age},
+                    爱好呢是${d.hobby},我的宣言:${d.info}`;   
+                }else{
+                    ul.innerHTML = `${data.data}`;
+                }
+            }
+        });
+    }
+</script>
+</body>
+</html>
diff --git a/2017-10-25/3_模板字符串.html b/2017-10-25/3_模板字符串.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+<script>
+
+    /*
+        模板字符串:
+            ``
+            
+            ``里面放的是字符串
+
+            如果有变量，那么使用 ${}
+
+            '我叫'+str === `我叫${str}`
+
+        ${}除了可以放变量还可以运算  ${num*10} -> 10
+        使用了字符串模板之后可以随意换行
+    
+    */
+    var str = '小明';
+
+    console.log(`${str},`)
+
+</script>
+
+</body>
+</html>
diff --git a/2017-10-25/4_上传.html b/2017-10-25/4_上传.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <!-- <form action="post_file.php" method="post" enctype="multipart/form-data">
+        <input type="file" name="file">
+        <input type="submit" value="上传">
+    </form> -->
+
+    <input type="file" id="f">
+    <input type="button" value="上传" id="btn">
+<script>
+    /*
+        浏览器的js，不能操作本地文件（增删改..）
+
+        上传:
+            传统的上传
+
+    最大优点就是我们可以异步上传一个二进制文件.
+        var f = new FormData();
+        f.append(key,val);
+        ajax.send(f);
+    */
+
+    btn.onclick = function(){
+        // console.dir(f.files[0]);
+        var ajax = new XMLHttpRequest;
+
+        ajax.open('post','post_file.php');
+
+        var formData = new FormData();
+
+        formData.append('file',f.files[0]);
+
+        // console.log(formData);
+
+        ajax.send(formData);
+
+        //ajax.send('file='+f.files[0]);
+
+        ajax.onload = function(){
+            console.log(ajax.responseText);
+        }
+
+    }
+
+</script>
+</body>
+</html>
diff --git a/2017-10-25/ajax.js b/2017-10-25/ajax.js
@@ -0,0 +1,65 @@
+/*
+    缓存：
+        当前一次请求的地址和后一次请求的地址是一样的，那么有可能会出现缓存（特别是get请求在IE下特别容易被缓存）
+
+
+
+        
+
+*/
+
+function ajax(json){
+    // console.log(123);
+    //默认的配置
+    var settings = {
+        url:'',
+        method:'get',
+        success:function(){},
+        fail:function(){},
+        data:{},
+        dataType:'json'
+    }
+
+    //有配置走配置，没配置走默认
+    for(var attr in json){
+        settings[attr] = json[attr]; 
+    }
+
+    //序列化操作，把对象转成字符串，可以去看第6个课件
+    var arr = [];
+    for(var attr in settings.data){
+        arr.push(attr + '=' + settings.data[attr]);
+    }
+    settings.data = arr.join('&');
+    var ajax = new XMLHttpRequest;
+    // console.log(settings.data);
+    if(settings.method === 'get'){
+        ajax.open('get',settings.url+'?'+settings.data+'&'+(new Date().getTime()),true);
+        ajax.send();
+    }else if(settings.method === 'post'){
+        ajax.open('post',settings.url,true);
+        ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
+        ajax.send(settings.data);
+    }
+
+    ajax.onreadystatechange = function(){
+        //4代表完成
+        if(ajax.readyState === 4){
+            //200-207之前算成功
+            if(ajax.status >= 200 && ajax.status <= 207){
+                //说明我要json
+                if(settings.dataType === 'json'){
+                    var d = ajax.responseText;
+                    settings.success(eval('('+ d +')'));
+                }else if(settings.dataType === 'xml'){
+                    settings.success(ajax.responseXML);
+                }else if(settings.dataType === 'str'){
+                    settings.success(ajax.responseText);
+                }
+
+            }else{
+                settings.fail(ajax.status);
+            }
+        }
+    }
+}
diff --git a/2017-10-25/login/ajax(4).js b/2017-10-25/login/ajax(4).js
@@ -0,0 +1,56 @@
+function ajax(json){
+    console.log(123);
+    //默认的配置
+    var settings = {
+        url:'',
+        method:'get',
+        success:function(){},
+        fail:function(){},
+        data:{},
+        dataType:'json'
+    }
+
+    //有配置走配置，没配置走默认
+    for(var attr in json){
+        settings[attr] = json[attr]; 
+    }
+
+    //序列化操作，把对象转成字符串，可以去看第6个课件
+    var arr = [];
+    for(var attr in settings.data){
+        arr.push(attr + '=' + settings.data[attr]);
+    }
+    settings.data = arr.join('&');
+    var ajax = new XMLHttpRequest;
+    // console.log(settings.data);
+    if(settings.method === 'get'){
+        ajax.open('get',settings.url+'?'+settings.data,true);
+        ajax.send();
+    }else if(settings.method === 'post'){
+        ajax.open('post',settings.url,true);
+        ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
+        ajax.send(settings.data);
+    }
+
+    ajax.onreadystatechange = function(){
+        //4代表完成
+        if(ajax.readyState === 4){
+            //200-207之前算成功
+            if(ajax.status >= 200 && ajax.status <= 207){
+                //说明我要json
+                if(settings.dataType === 'json'){
+                    var d = ajax.responseText;
+
+                    // settings.success(eval('('+ d +')'));
+                }else if(settings.dataType === 'xml'){
+                    settings.success(ajax.responseXML);
+                }else if(settings.dataType === 'str'){
+                    settings.success(ajax.responseText);
+                }
+
+            }else{
+                settings.fail(ajax.status);
+            }
+        }
+    }
+}
diff --git a/2017-10-25/login/ajax_error.php b/2017-10-25/login/ajax_error.php
@@ -0,0 +1,6 @@
+<?php
+header('content-type:text/html;charset=utf-8');
+
+echo "欢迎来到北京妙味课堂！";
+
+?>
diff --git a/2017-10-25/login/common.css b/2017-10-25/login/common.css
@@ -0,0 +1,27 @@
+@charset "utf-8";
+*{margin:0; padding:0;}
+li{list-style:none;}
+img{border:none;}
+a{text-decoration:none;}
+input,textarea{outline:none; resize:none; border:none;}
+.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
+.clearfix{*zoom:1;}
+
+body{background:url(img/bg.jpg) center center no-repeat; background-size:100% 140%;}
+/*登陆*/
+.loginBox{
+	width:278px; padding:30px 80px 20px 80px; margin:40px auto; 
+	background-image: -webkit-linear-gradient(top,rgb(255,255,255),rgb(242,242,242));
+	box-shadow: 0 0 3px rgba(21,62,78,0.8); position:relative;
+	border-radius:2px;
+}
+.loginList{width:100%;}
+.loginList li{margin-bottom:10px; overflow:hidden;}
+.hTxt{font:18px/1.5 "Microsoft YaHei";}
+.inputs{width:260px; display:block; font-weight:bold; background:url(img/inputBg.png) 0 0 no-repeat; height:14px; line-height:14px; padding:9px; color:#666;}
+.loginList .btns{text-align:right; background:none; width:280px;}
+.reg{background:url(img/btns.png) 0 -42px no-repeat; width:70px; height:42px; display:inline-block; overflow:hidden; opacity:.8;}
+.login{background:url(img/btns.png) 0 0 no-repeat; width:70px; height:42px; display:inline-block; overflow:hidden; opacity:.8;}
+.reg:hover,.login:hover{opacity:1;}
+.reg:active,.login:active{opacity:.9;}
+.look{text-align:right; font:12px/1.2 "Microsoft YaHei"; color:#999;}
diff --git a/2017-10-25/login/img/bg.jpg b/2017-10-25/login/img/bg.jpg
diff --git a/2017-10-25/login/img/bodyBg.jpg b/2017-10-25/login/img/bodyBg.jpg
diff --git a/2017-10-25/login/img/btns.png b/2017-10-25/login/img/btns.png
diff --git a/2017-10-25/login/img/icons.png b/2017-10-25/login/img/icons.png
diff --git a/2017-10-25/login/img/inputBg.png b/2017-10-25/login/img/inputBg.png
diff --git a/2017-10-25/login/img/jj.png b/2017-10-25/login/img/jj.png
diff --git a/2017-10-25/login/img/takeSbmComment.png b/2017-10-25/login/img/takeSbmComment.png
diff --git a/2017-10-25/login/img/userBj.png b/2017-10-25/login/img/userBj.png