Happy New Year!

07..前后台交互,设计模式


1.前后台交互

2.设计模式


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

node server-run.js

 

前后端分离

 

本地存储


接口文档要会看


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


.on("click",function(){}) //可以绑定未来元素 虚拟DOM


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

图片64码

http://tool.chinaz.com/tools/imgtobase


交互例子 看看

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

 

设计模式

1.工厂模式 重复的产生N个实例

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

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
  </head>
  <body>
  <button class="btn">click</button>
    <script type="text/javascript">
    var aa = {
      "name":"sonia",
      "hobby":["sing","dance"],
      "work":{
              "job":"web开发",
              "address":"wuhan"
              },
      "member":[{
                  "name":"ben",
                  "hobby":["sing","dance"]
                },
                {
                  "name":"lili",
                  "hobby":["sing","dance"]
                }]
    }

    //字面量
    var obj ={
      name:"sonia",
      age:22
    };
    //JSON
    /*var aa = {
      "name":"sonia",
      "hobby":["sing","dance"],
      "work":{
              "job":"web开发",
              "address":"wulan"
              },
      "member":[{
                  "name":"lili",
                  "hobby":["sing","dance"]
                },{
                  "name":"ben",
                  "hobby":["sing","dance"]
                }]
    };
    var test = JSON.stringify(aa,['name','member','work']);*/

    //js原生
    /*var xmlhttp;
      if(window.XMLHttpRequest){
        //ie7+ chrome firefox safari opera
        xmlhttp = new XMLHttpRequest();
      }else {
        //ie5/ie6
        xmlhttp = new ActiveXObject("Microfoft.XMLHTTP");
      };
      //向服务器发送请求    true异步   false同步
    xmlhttp.open("get",url,true);
    xmlhttp.send();*/

    //jquery
    $(".btn").on('click',function() {
      $.ajax({
        type:"post",
        url:"http://localhost:3000/info",
        async:true,//async 异步  sync同步
        data:{username:"aaa", content:"bbb"},
        dataType:"json",
        success:function(msg) {
          var obj = msg;

          alert(JSON.stringify(msg));
        },
        error:function() {

        }
      })
    });
    //重复产生N个实例
        /*function Create(name,age){
            var obj = new Object();
            obj.name = name;
            obj.age = age;
            obj.action = function() {
                return this.name;
            };
            return obj;
        };
        var p1 = new Create('aaa',1);
    var p2= new Create('aaa',1);
    var p3= new Create('aaa',1);*/

    function AaObject() {
        this.name;
    };
    function BbObject() {
        this.name;
    };
    function Create(type,name){
        if (type =='a'){
            var obj = new AaObject();
            obj.name = name;
            obj.action = function() {
                return this.name;
            };
            return obj;
        } ;
        if (type =='b'){
            var obj = new BbObject();
            obj.name = name;
            obj.action = function() {
                return this.name;
            };
            return obj;
        } ;

    };
    var p1 = new Create('a','a1');
    var p3 = new Create('a','a1');
    var p4 = new Create('a','a1');
    var p5 = new Create('a','a1');
    var p2= new Create('b','b1');


    </script>
  </body>
</html>

 

<!DOCTYPE >     
<html>     
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     
<title>11111</title>  
<!--引用pure-->
<link href="css/pure/pure-nr.css" rel="stylesheet" />
<link href="css/pure/grids-responsive-min.css" rel="stylesheet" />
<link href="css/demo.css" rel="stylesheet" />
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body> 


<div class="fn-wrapper pure-g">
    <!--左侧-->
    <div class="pure-u-1 pure-u-sm-9-24">
        <div class="fn-title pure-g">
            <div class="fn-title-box"></div>
            <h2 class="pure-u-3-5"><a href="#">最新列表</h2>
            <a class="pure-u-2-5 fn-textright" href="#">更多</a>
        </div>
        <div class="blog list-l">
            <ul>
               <!-- <li class="blog-title"><a  href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">慕容秋雪</a></li> 
               <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">午后咖啡</a></li> 
               <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li> 
               <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li> -->
            </ul>
        </div>
    </div>
    <!--左侧 end -->
    <!--中间-->
    <div class="pure-u-1 pure-u-sm-6-24">
        <div class="center">
            <div class="fn-title-pansy" style="border-bottom:3px solid #0599aa;">
                <h2 ><a href="#">列表</a></h2>
            </div>
            <div>
                <ul class="photoblog pure-g">
                    <li class="pure-u-1 list-img">
                        <!-- <a href="#"><img src='images/sanli.jpg'></a> -->
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--中间 end -->
    <!--右侧-->
    <div class="pure-u-1 pure-u-sm-9-24">
        <div class="fn-title pure-g">
            <div class="fn-title-box"></div>
            <h2 class="pure-u-3-5"><a href="#">热门列表</a></h2>
            <a class="pure-u-2-5 fn-textright" href="#">更多</a>
        </div>
        <div class="blog list-hot">
            <ul>
                <!-- <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">孤屿</a></li>
                <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">午后咖啡</a></li> 
                <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li> 
                <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li>  -->
            </ul>
        </div>
    </div>
    <!--右侧 end -->
    <div class="msg-input">
        <div >
            <input type="text" class="input1">
        </div>
        <div>
            <input type="text" class="input2">
        </div>
        <div>
            <button class="btn">click</button>
        </div>
            
        
    </div>
</div>

</body>     
</html>  
<script>
    $(function() {
        getList();
        getImg();
        $(".msg-input .btn").click(function() {
            getHot();
        });
        
    });
    //列表
    function getList() {
        $.ajax({
        type:"get",
        url:"http://localhost:3000/info",
        async:true,//async 异步  sync同步
        //data:{username:"aaa", content:"bbb"},
        dataType:"json",
        success:function(msg) {
          var data = msg.result;
          if(msg.code == '200'){
            $.each(data,function(index,item){
                $(".list-l ul").append('<li class="blog-title"><a  href="#" class="pure-u-4-5">'+item.content+'</a><a href="#" class="pure-u-1-5">'+item.name+'</a></li>')
            });
          }

          //alert(JSON.stringify(msg));
        },
        error:function() {

        }
      })
    };
    //POST
    function getHot() {
        var _input1 = $(".input1").val();
        var _input2 = $(".input2").val();
        var data = {
            "accesstoken":'1234',
            "name":_input1,
            "content":_input2
        }
        $.ajax({
        type:"post",
        url:"http://localhost:3000/info2",
        async:true,//async 异步  sync同步
        data:data,
        dataType:"json",
        success:function(msg) {
          var data = msg;
          //if(msg.code == '200'){
            $.each(data,function(index,item){
                $(".list-hot ul").append('<li class="blog-title"><a  href="#" class="pure-u-4-5">'+item.content+'</a><a href="#" class="pure-u-1-5">'+item.name+'</a></li>')
            });
            $(".input1,.input2").val('');
          //}

          //alert(JSON.stringify(msg));
        },
        error:function() {

        }
      });
    }
        //img
    function getImg() {
        $.ajax({
            type:"get",
            url:"http://localhost:3000/info_img",
            async:true,//async 异步  sync同步
            //data:data,
            dataType:"json",
            success:function(msg) {
              var data = msg;
              if(msg.code == '200'){
                $(".list-img").html('<a href="#"><img src='+data.result+'></a>');
              }

              //alert(JSON.stringify(msg));
            },
            error:function() {

            }
        });
    }

</script>

 

 

<!DOCTYPE >     
<html>     
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     
<title>1111</title>  
<!--引用pure-->
<link href="css/pure/pure-nr.css" rel="stylesheet" />
<link href="css/pure/grids-responsive-min.css" rel="stylesheet" />
<link href="css/demo.css" rel="stylesheet" />
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body> 


<div class="fn-wrapper pure-g">
    <!--左侧-->
    <div class="pure-u-1 pure-u-sm-9-24">
        <div class="fn-title pure-g">
            <div class="fn-title-box"></div>
            <h2 class="pure-u-3-5"><a href="#">最新列表</h2>
            <a class="pure-u-2-5 fn-textright" href="#">更多</a>
        </div>
        <div class="blog list-l">
            <ul>
               <!--  <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">慕容秋雪</a></li> 
               <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">午后咖啡</a></li> 
               <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li> 
               <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li>  -->
            </ul>
        </div>
    </div>
    <!--左侧 end -->
    <!--中间-->
    <div class="pure-u-1 pure-u-sm-6-24">
        <div class="center">
            <div class="fn-title-pansy" style="border-bottom:3px solid #0599aa;">
                <h2 ><a href="#">列表</a></h2>
            </div>
            <div>
                <ul class="photoblog pure-g">
                    <li class="pure-u-1 list-img">
                        <!-- <a href="#"><img src='http://img4.imgtn.bdimg.com/it/u=3900663449,3280179767&fm=214&gp=0.jpg'></a> -->
                        <!-- <a href="#" style="background-image: url('images/sanli.jpg')"></a> -->
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--中间 end -->
    <!--右侧-->
    <div class="pure-u-1 pure-u-sm-9-24">
        <div class="fn-title pure-g">
            <div class="fn-title-box"></div>
            <h2 class="pure-u-3-5"><a href="#">热门列表</a></h2>
            <a class="pure-u-2-5 fn-textright" href="#">更多</a>
        </div>
        <div class="blog list-hot">
            <ul>
                <!-- <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">孤屿</a></li>
                <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">午后咖啡</a></li> 
                <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li> 
                <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li>  -->
            </ul>
        </div>
    </div>
    <!--右侧 end -->
</div>
<!-- input -->
    <div class="main pure-g">
      <div class="pure-u-1-3">
        <div class=" mg">
            <input type="text" class="input1"/>
        </div>
      </div>
      <div class="pure-u-1-3">
        <div class="mg">
            <input type="text" class="input2"/>
        </div>
      </div>
      <button class="pure-u-1-3">按钮</button>
    </div> 
</body>     
</html>  
<script>
$(function(){
    getList();
    getImg();
    $("button").click(function(){
        getInput();
    });
});

function getList(){    
    $.ajax({
        type: "get", //请求方式
        url:"http://localhost:3000/info", //请求路径
        //data:"id=655952&sum=3",  //传参
        //data:{"id":3,"sum":4},
        dataType: 'json',   //返回值类型
        success: function (msg) {
          var data = msg.result;
          if(msg.code == '200'){
              $.each(data, function (index,item) {
                $(".list-l ul").append('<li class="blog-title"><a href="#" class="pure-u-4-5">'+item.content+'</a><a href="#" class="pure-u-1-5">'+item.name+'</a></li>'); 
            });  
          }

        },
        error: function () {
       }
    });
};
function getImg(){    
    $.ajax({
        type: "get", //请求方式
        url:"http://localhost:3000/info_img", //请求路径
        //data:"id=655952&sum=3",  //传参
        //data:{"id":3,"sum":4},
        dataType: 'json',   //返回值类型
        success: function (msg) {
          if(msg.code == '200'){
            $(".list-img").html('<a href="#"><img src='+msg.result+'></a>');  
          }
        },
        error: function () {
       }
    });
}

function getInput(){
    var _input1 = $(".input1").val();
    var _input2 = $(".input2").val();
    var data= {
        "name":_input1,
        "content":_input2
    };  
    $.ajax({
        type: "POST", //请求方式
        url:"http://localhost:3000/info2", //请求路径
        data: data, //传参
        dataType: 'json',   //返回值类型
        success: function (msg) {
            var data = msg;
            $.each(data, function (index,item) {
                $(".list-hot ul").append('<li class="blog-title"><a href="#" class="pure-u-4-5">'+item.name+'</a><a href="#" class="pure-u-1-5">'+item.content+'</a></li>'); 
            }); 
            $(".input1,.input2").val('');
              
        },
        error: function () {
        }
    });
}
</script>

 

posted @ 2018-03-24 15:24  义美-小义  阅读(186)  评论(0)    收藏  举报
返回顶部小火箭
世界很公平，想要最好，就一定得付出!
x
github主页
一本好书