2021-04-24 jq ajax 06

最新推荐文章于 2023-11-27 14:21:14 发布

子非鱼emma

最新推荐文章于 2023-11-27 14:21:14 发布

阅读量133

点赞数 1

分类专栏： jq&ajax 文章标签： jquery

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

版权

jq&ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了HTML5的localStorage用于本地存储数据的方法，并展示了change事件在表单元素上的应用。同时，通过示例展示了如何使用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>
    
</body>
<script>
//BOM本地存储
// localStorage 本地存储
// localStorage.setItem(key,value);存
// localStorage.getItem(key)       读取
// localStorage.removeItem(key)    删除

localStorage.setItem('name','王二狗');
var name= localStorage.getItem('name');
console.log(name);
localStorage.removeItem('name');

</script>
</html>

2.change事件

<!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>
    <input type="text" id="txt" />
    <select name="" id="sel">
      <option value="1">苹果</option>
      <option value="2">香蕉</option>
      <option value="3">蜜桃</option>
    </select>
  </body>
  <script>
    
    // change事件 表单元素时value属性改变的时候触发

    var tex=document.getElementById('tex')
    txt.onchange=function(){
      console.log('我被改变了');

    };

    var sel=document.getElementById('sel')
    sel.onchange=function(){
      console.log(this.value);
    };
  </script>
</html>

3.窝窝游记详情

$(function () {
  // 得到文章的id
  var id = location.search.substring(4);
  if (!id) {
    alert('参数不合法');
    location.href = "./index.html";
  }



  //   如果参数合法 发送请求
  $.ajax({
    url: 'http://kumanxuan1.f3322.net:8809/travels/detail',
    type: 'get',
    data: {
      id: id
    },


    success: function (res) {
      //修改标题
      $('.headtext').text(res.data.title);
      //修改发布时间
      $('.vc_time .time').text(res.data.releaseTime.substring(0, 10));
      //出行天数
      $('.day').html(`出行天数<span>/</span>${res.data.day}天`);

      //内容
      $('.vc_article').html(res.data.content)
    }
  })
})

4.窝窝游记列表，未封装函数的

$(function () {
    //获取人均花费
    var hf = $('[name=perExpendType]').val();
    // 出行天数
    var ts = $('[name=dayType]').val();
    //判断是最新还是最热 谁样式有on
    // console.log($('.post-tab .tab-item:nth-child(2)'));
    var orderType = $('.tab-item:nth-child(2)').hasClass('on') ? 1 : 2;
    var data = {
        orderType: 2,
        currentPage: 1,
        perExpendType: 1,
        dayType: 2
    }



    // 发送请
    $.ajax({
        url: 'http://kumanxuan1.f3322.net:8809/travels/query',
        type: 'get',
        data: data,
        success: function (res) {
            var arr = res.data.content;
            var str = '';
            arr.forEach(e => {
                str += `<li class="post-item clearfix">
            <div class="post-cover"><a href="http://kumanxuan1.f3322.net:8808/views/travel/detail.html?id=${e.id}" target="_blank"><img width="215" height="135" src="${e.coverUrl}" class="lazy" style="display: inline;"></a></div>
            <div class="post-ding"><span id="topvote11710590">${e.thumbsupnum}</span><a href="javascript:;" data-japp="articleding" data-iid="11710590" data-vote="2067" class="btn-ding">顶</a></div>
            <h2 class="post-title yahei hasxjicon"><a href="http://kumanxuan1.f3322.net:8808/views/travel/detail.html?id=5e3bf6a93f050000ff0035e5" target="_blank" class="title-link">·${e.title}</a></h2>
            <div class="post-author"><span class="author"><a href="javascript:;" target="_blank" rel="nofollow"><img src="./images/default.jpg" width="15px" class="lazy" style="display: inline;"></a>
                    作者：<a href="javascript:;" target="_blank" rel="nofollow">${e.author.nickname}</a></span></div>
            <div class="post-content">
               ${e.summary}
            </div> <span class="status"><i class="icon_view"></i>${e.viewnum}<i class="icon_comment"></i>${e.replynum}</span>
        </li>`;
            })
            //生成到页面
            $('.post-list ul').html(str);
        }
    })








    //目标:实现人均消费和天数的筛选
    /*   1.获取元素 注册事件 change事件
      2.服务器需要人均消费的参数 是 1,2,3,4
       1~4这几个数存在select列表中 获取对应的value值 
      3.发送请求
      4.动态生成 */
    $('.navbar-sub [name=perExpendType]').on('change', function () {
        var type = $(this).val();
        $.ajax({
            url: 'http://kumanxuan1.f3322.net:8809/travels/query',
            type: 'get',
            data: {
                orderType: 2,
                currentPage: 1,
                perExpendType: type
            },
            success: function (res) {
                if (res.code === 200) {
                    var arr = res.data.content;
                    var str = '';
                    arr.forEach(e => {
                        str +=
                            `<li class="post-item clearfix">
                            <div class="post-cover"><a href="http://kumanxuan1.f3322.net:8808/views/travel/detail.html?id=${e.id}" target="_blank"><img width="215" height="135" src="${e.coverUrl}" class="lazy" style="display: inline;"></a></div>
                            <div class="post-ding"><span id="topvote11710590">${e.thumbsupnum}</span><a href="javascript:;" data-japp="articleding" data-iid="11710590" data-vote="2067" class="btn-ding">顶</a></div>
                            <h2 class="post-title yahei hasxjicon"><a href="http://kumanxuan1.f3322.net:8808/views/travel/detail.html?id=5e3bf6a93f050000ff0035e5" target="_blank" class="title-link">·${e.title}</a></h2>
                            <div class="post-author"><span class="author"><a href="javascript:;" target="_blank" rel="nofollow"><img src="./images/default.jpg" width="15px" class="lazy" style="display: inline;"></a>
                                    作者：<a href="javascript:;" target="_blank" rel="nofollow">${e.author.nickname}</a></span></div>
                            <div class="post-content">
                            ${e.summary}
                            </div> <span class="status"><i class="icon_view"></i>${e.viewnum}<i class="icon_comment"></i>${e.replynum}</span>
                            </li>`;
                    })
                    //生成到页面
                    $('.post-list ul').html(str);
                }
            }
        })
    })
})

5.窝窝游记详情页，封装函数的

$(function(){
    //封装一个请求数据,并动态生成的函数
    function getList(currentPage){
          //获取人均花费
    var hf = $('[name=perExpendType]').val();
    console.log(hf);
    // 出行天数
    var ts = $('[name=dayType]').val();
    //判断是最新还是最热 谁样式有on
    // console.log($('.post-tab .tab-item:nth-child(2)'));
    var orderType = $('.tab-item:nth-child(2)').hasClass('on')?1:2;
    var data = {
        orderType: orderType,
        currentPage:currentPage,
        perExpendType:hf,
        dayType:ts
    }
    // 发送ajax请求
    $.ajax({
        url:'http://kumanxuan1.f3322.net:8809/travels/query',
        type:'get',
        data:data,
        success:function(res){
            if(res.code===200){
             var arr = res.data.content;
             var str = '';
             arr.forEach(e=>{
                 str +=`<li class="post-item clearfix">
                 <div class="post-cover"><a href="http://kumanxuan1.f3322.net:8808/views/travel/detail.html?id=${e.id}" target="_blank"><img width="215" height="135" src="${e.coverUrl}" class="lazy" style="display: inline;"></a></div>
                 <div class="post-ding"><span id="topvote11710590">${e.thumbsupnum}</span><a href="javascript:;" data-japp="articleding" data-iid="11710590" data-vote="2067" class="btn-ding">顶</a></div>
                 <h2 class="post-title yahei hasxjicon"><a href="http://kumanxuan1.f3322.net:8808/views/travel/detail.html?id=5e3bf6a93f050000ff0035e5" target="_blank" class="title-link">·${e.title}</a></h2>
                 <div class="post-author"><span class="author"><a href="javascript:;" target="_blank" rel="nofollow"><img src="./images/default.jpg" width="15px" class="lazy" style="display: inline;"></a>
                         作者：<a href="javascript:;" target="_blank" rel="nofollow">${e.author.nickname}</a></span></div>
                 <div class="post-content">
                    ${e.summary}
                 </div> <span class="status"><i class="icon_view"></i>${e.viewnum}<i class="icon_comment"></i>${e.replynum}</span>
             </li>`;
             })
              //生成到页面
     $('.post-list ul').html(str);
            }
         }
    })
    }


    //点击上面的两个分类 进行筛选
    $('.com-opt').on('change',function(){
       getList(1);
    })
    // 点击上面的热门和最新 进行数据切换显示
    $('.tab-item').on('click',function(){
        //先把样式改变
        $(this).addClass('on').siblings().removeClass('on');
        getList(1)
    })
    getList(1)
})