布置的任务：
end.html页面代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <style> #container{ width: 400px; height: 300px; margin: auto; border: gray solid 0.5px; border-radius: 5px; } h2{ text-align: center; margin-top: 50px; } #username{ margin-left: 65px; margin-top: 25px; } #password{ margin-left: 65px; margin-top: 20px; } #btn{ height: 30px; width: 270px; background-color: #66afe9; color: white; border-radius: 5px; margin-left: 65px; margin-top: 20px; } input{ height: 25px; width: 200px; border-radius: 5px; } input:focus{ border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6) } </style> <body> <div > <div id="container"> <h2>用户登录</h2> <div id="username">用户名：<input type="text" id="uid"/></div> <div id="password">密 码：<input type="password" id="pwd"/></div> <div id="login"><input type="button" id="btn" value="登录"/></div> </div> <div id="box"></div> </div> </body> <script type="text/javascript"> $("#btn").click(function(){ //第一步：取数据,这里用到了用户名和密码 var uid=$("#uid").val(); var pwd=$("#pwd").val(); //第二步：验证数据，这里需要从数据库调数据，我们就用到了ajax $.ajax({ url:"/php.php",//请求地址 data:{uid:uid,pwd:pwd},//提交的数据 type:"POST",//提交的方式 dataType:"TEXT", //返回类型 TEXT字符串 JSON XML success:function(data){ //开始之前要去空格，用trim() if(data.trim()=="OK") { //window.location.href = "demo.html"; document.getElementById('container').style.display='none'; $.ajax({ url:'/test.php', type:"get", dataType:"json", success: function(user){ var htmlNodes = ''; for(i=Math.floor(Math.random()*10+2); i < user.length; i++){ htmlNodes += '<figure><div class="img"><img width="120" height="120" src="' + user[i].images + '"></div><figcaption><strong>' + user[i].name + '</strong><p>' + user[i].caption + '</p></figcaption></figure>'; } $('#box').append(htmlNodes); } }) } else{ alert("用户名或者密码错误"); } } }) }) </script> </html>php.php代码
<?php $uid=$_POST["uid"]; $pwd=$_POST["pwd"]; if($uid==111&&$pwd==111) { echo"OK"; } else{ echo"NO"; } ?>test.php代码
<?php echo '[ { "name" : "Herry", "caption" : "还没好好的感受，雪花绽放的气候", "images" : "images/1.jpg" }, { "name" : "Dorry", "caption" : "我们一起颤抖,会更明白什么是温柔", "images" : "images/4.jpg" }, { "name" : "Money", "caption" : "还没跟你牵着手,走过荒芜的沙丘", "images" : "images/5.jpg" }, { "name" : "Herry", "caption" : "可能从此以后学会珍惜,天长和地久", "images" : "images/2.jpg" }, { "name" : "Herry", "caption" : "有时候有时候,我会相信一切有尽头,相聚离开都有时候,没有什么会永垂不朽", "images" : "images/3.jpg" }, { "name" : "Herry", "caption" : "还没好好的感受，雪花绽放的气候", "images" : "images/1.jpg" }, { "name" : "Dorry", "caption" : "我们一起颤抖,会更明白什么是温柔", "images" : "images/4.jpg" }, { "name" : "Money", "caption" : "还没跟你牵着手,走过荒芜的沙丘", "images" : "images/5.jpg" }, { "name" : "Herry", "caption" : "可能从此以后学会珍惜,天长和地久", "images" : "images/2.jpg" }, { "name" : "Herry", "caption" : "有时候有时候,我会相信一切有尽头,相聚离开都有时候,没有什么会永垂不朽", "images" : "images/3.jpg" }, { "name" : "Herry", "caption" : "还没好好的感受，雪花绽放的气候", "images" : "images/1.jpg" }, { "name" : "Dorry", "caption" : "我们一起颤抖,会更明白什么是温柔", "images" : "images/4.jpg" }, { "name" : "Money", "caption" : "还没跟你牵着手,走过荒芜的沙丘", "images" : "images/5.jpg" }, { "name" : "Herry", "caption" : "可能从此以后学会珍惜,天长和地久", "images" : "images/2.jpg" }, { "name" : "Herry", "caption" : "有时候有时候,我会相信一切有尽头,相聚离开都有时候,没有什么会永垂不朽", "images" : "images/3.jpg" } ]'; ?>执行效果
菜鸟上手，师姐眉头紧锁......
