2021-04-21 jQuery04

最新推荐文章于 2023-01-04 11:26:11 发布

子非鱼emma

最新推荐文章于 2023-01-04 11:26:11 发布

阅读量131

点赞数

分类专栏： jq&ajax

本文链接：https://blog.csdn.net/qq_38998319/article/details/115978388

版权

jq&ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了使用jQuery进行服务器数据请求的方法，包括游记列表的动态生成，交集选择器的应用，以及注册事件中手机号重复验证。还详细展示了如何通过Ajax发送不同请求，如获取轮播图并实现图片切换与用户登录注册流程。

摘要由CSDN通过智能技术生成

1.将数据带回服务器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./lib/jquery.js"></script>
  </body>
  <script>
   
  //  学习如果带数据请求服务器
  //  $.ajax({
  //    url:请求地址
  //    success:成功的回调函数
  //    data:带回服务器的数据
  //  })

  //  data可以是一个字符串
  //  格式：键=值&键=值

  //  也可以是对象
  //  {键：值，键：值。。。。}
  
  
  $.ajax({
    url:'http://kumanxuan1.f3322.net:8809/travels/query',
    success:function(res){
      console.log(res);
    },
    data:{
      orderType:1,
      currentPage:1
    }
  })
  
  </script>
</html>

2.交集选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
     div,h1,p,span{
       color:tomato;
     }
     /* 交集 并且的关系 要满足多个条件 */

     div.box{
       background-color: lightblue;
     }

     .abc.def.ghi{
       background-color: lightgreen;
     }

     div#box.aa{
       background-color: magenta;
     }
    </style>
  </head>
  <body>
    <div>qqqq</div>
    <div class="box">asdas</div>
    <div class="abc def ghi">adsas</div>
    <div id="box" class="aaa">22222</div>
    <h1>hahhahaha</h1>
  </body>
</html>

3.发送不同的请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./lib/jquery.js"></script>
  </body>
  <script>
   
  //  ajax不同的请求方式
/* 
   $.ajax({
     method/type:'get/post'
   })


   $.ajax({
     url:'',
     data:{
       phone:'13596854621',
     },
     type:'get',
     success:(res)=>{
       console.log(res);
     }
   }) */


   $.ajax({
     url:'http://kumanxuan1.f3322.net:8809/users/sendVerifyCode',
     data:{
       phone:'13854225125',
     },
     method:'post',
     success:(res)=>{
       console.log(res);
     }
   })
  </script>
</html>

4.窝窝项目首页游记和轮播图

/* 
获取游记列表的 然后动态生成的函数
orderType number 不同的排序方式
currentPage number 你要的是几页数据
*/

function pageList(orderType,currentPage){
    $.ajax({
        url:'http://kumanxuan1.f3322.net:8809/travels/query',
        data:{
          currentPage:currentPage,
          orderType:orderType
        },
        success:res=>{
            // console.log(res);
            // 得到数组
            var arr = res.data.content;
            // console.log(arr);
            // 开始动态生成
            var str = '';
            arr.forEach(function(e){
              str+=`<div class="tn-item clearfix">
              <div class="tn-image"><a href="javascript:;" target="_blank"><img src="${e.coverUrl}" style="display: inline;"></a></div>
              <div class="tn-wrapper">
                  <dl>
                      <dt><a href="http://kumanxuan1.f3322.net:8808/views/travel/detail.html?id=${e.id}" target="_blank">${e.title}</a></dt>
                      <dd><a href="http://kumanxuan1.f3322.net:8808/views/travel/detail.html?id=5e3bf6a93f050000ff0035e5" target="_blank">
                      ${e.summary}
                          </a></dd>
                  </dl>
                  <div class="tn-extra"><span class="tn-ding"><a href="javascript:;" data-japp="articleding" data-iid="12451790" data-vote="2157" rel="nofollow" class="btn-ding"></a> <em id="topvote12451790">${e.thumbsupnum}</em></span> <span class="tn-place"><i></i> <a href="javascript:void(0);" rel="nofollow" class="_j_gs_item">
                              ${e.destName}</a>，by
                      </span> <span class="tn-user"><a href="javascript:;" target="_blank" rel="nofollow"><img src=".${e.author.headImgUrl}">
                      ${e.author.nickname}
                          </a></span> <span class="tn-nums"><i></i>${e.viewnum}/${e.favornum}</span></div>
              </div>
          </div>`;
          $('.tn-list').html(str);
            })
          }
    })
}

// 先把第一页(1) 按 访问量 (2) 排序
pageList(2,1)

// 点击1按钮
$('#pagination a:nth-child(2)').on('click',function(){
    // 发请求,得到第二页的数据 并且动态生成
    if($('._j_gs_tab.active').hasClass('tn-nav-hot')){
         pageList(2,1)
    }else{
        pageList(1,1);
    }
       
  
  })
// 点击2按钮
$('#pagination a:nth-child(3)').on('click',function(){
    // 发请求,得到第二页的数据 并且动态生成
    if($('._j_gs_tab.active').hasClass('tn-nav-hot')){
        pageList(2,2)
   }else{
       pageList(1,2);
   }
  
  })

//   点击分类进行筛选
$('._j_gs_tab').on('click',function(){
   if($(this).hasClass('tn-nav-hot')){
    //    如果有hot点击是热门
    pageList(2,1)
   }else{
       //要的是最新
       pageList(1,1)
   }

   //控制样式
   $(this).addClass('active').siblings().removeClass('active');
})



//================从服务器获取轮播图并动态生成==================================
/* 动态生成轮播图
1.生成轮播的大图
2.生成轮播的小图 

步骤:
1.发请求 得到数组
2.遍历数组 动态生成
3.显示某一张图片的时候 对应的小图有黄色框
*/
$.ajax({
    url:'http://kumanxuan1.f3322.net:8809/index/banners/travel',
    success:res=>{
        var arr = res.data;
    
        // 轮播用的大图
        var str = '';
        // 轮播用到的小图
        var str2 = '';
        arr.forEach(e=>{
            //拼接大图
            str+=`<li data-id="0" class="show_image"><a href="http://kumanxuan1.f3322.net:8808/views/travel/detail.html?id=${e.id}" class="show-pic"><img src="${e.coverUrl}"></a> <a href="javascript:;" class="show-title dark">
            <div class="date"><span class="day">15</span>/Oct.2020</div>
            <h3>${e.title}</h3>
        </a></li>`;

          //拼接小图
          str2 +=`<li class="show_nav">
          <a href="javascript:"><img src="${e.coverUrl}" height="62" width="110">
            <span></span></a>
        </li>`
        }) 

      
        
     
        //将大图放在结构中
        $('.show-image').html(str);
        //将小图放在结构中
        $('.show-nav').html(str2);
        //显示一张图
        $('.show-image li').eq(currentImg).show();
        //把显示的小图边框变黄
        $('.show-nav li').eq(currentImg).addClass('active');

    }
   

})

var currentImg = 0;
//定时器
setInterval(()=>{
    //获取大图
    var imgs = $('.show-image li');
    //获取小图
    var navs = $('.show-nav li');
    currentImg = ++currentImg % imgs.length;
    imgs.eq(currentImg).fadeIn(300).siblings().fadeOut(300);
    navs.eq(currentImg).addClass('active').siblings().removeClass('active');
},2000);

//点击切换
// 点击用的小图是动态生成的 使用事件委托来实现点击效果
$('ul.show-nav').on('click','li',function(){
  currentImg = $(this).index();
  $('.show-image li').eq(currentImg).fadeIn(300).siblings().fadeOut(300);
  $(this).addClass('active').siblings().removeClass('active');
})

5.注册事件，判断手机号是否重复

$(function(){
    /* 
    验证手机号码
    1.1获取注册按钮 注册事件
    1.2 获取里面的值 验证手机是否正确
    1.3发送到服务器
        验证电话号码  如果没有 执行注册
        如果存在了 执行登录
    
    
    */
   $('#_js_loginBtn').on('click',()=>{
    //   得到手机号码
    var phoneNum = $('#inputPassword').val().trim();
    if(phoneNum.length===0){
        alert('手机号码不能为空');
        return;
    }
    //发送请求
    $.ajax({
        url:'http://kumanxuan1.f3322.net:8809/users/checkPhone',
        data:{
            phone:phoneNum
        },
        type:'get', //写明请求方式
        success:function(res){
        // res中的data 如果为true,证明这个电话号码可以被注册
        // data为false 证明这个号注册过  直接跳转到登录页面
        // show() 如果这个元素被隐藏了就显示出来
        // hide() 如果这个元素显示 隐藏起来
        // prev() 上一个兄弟
        if(res.data){
            $('.signup-box').fadeIn(500).prev().hide();
        }else{
            // 手机号已经注册 直接跳转到登录页面
            location.href="./login.html";
        }
        }

    })
   })
})