实习任务之使用ajax获取动态数据列表

最新推荐文章于 2024-07-23 20:21:33 发布

ctrl-cv

最新推荐文章于 2024-07-23 20:21:33 发布

阅读量159

点赞数

分类专栏：实习任务笔记文章标签： ajax

本文链接：https://blog.csdn.net/weixin_43857520/article/details/109185731

版权

实习任务笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

布置的任务：

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">密&nbsp;&nbsp;&nbsp;&nbsp;码：<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"
                                    }
]';
?>

执行效果

菜鸟上手，师姐眉头紧锁......

ctrl-cv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实习任务之使用ajax获取动态数据列表

任务描述：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="
复制链接

扫一扫

专栏目录