jquery发送请求

是文静的

已于 2022-04-18 16:33:35 修改

阅读量895

点赞数

文章标签： jquery

于 2022-04-18 16:31:10 首次发布

本文链接：https://blog.csdn.net/qq_44091061/article/details/124252908

版权

区域划分 AJAX 地区点击动态渲染前端交互

关键词由CSDN通过智能技术生成

<div>
	<ul class="area-ul clearfix js-area-ul area">
     <li class="area-li area-item">
         <a class="areaItem cur">全国</a>
         <span style="display: none">0</span>
     </li>
   </ul>
</div>
<script>
	var areaId = '';
  function areaRender() {
    var CaseDom = $('.area');
    let current = 1//数据总条数
    let pageSize = 100000 //每页显示的条数
    var url = `/api/v1/divisionInfo?q=page&pageNo=${current}&pageSize=${pageSize}`
    $.ajax({
      type: 'Get',
      url:url ,
      // data: pageParam,
      dataType: "json",
      success: function (response) {
        // 将数据渲染到页面
        // Dom.html('');
        var Data = response.result.data;
        //如果Data不等于空，证明有数据，开始执行以下方法
        if (Data != '') {
          //进行循环，value就是文章对象
          $.each(Data, function(index, value) {
            if (value.depth_tree_code === 1) {
              var Html = `
                <li class="area-li area-item" οnclick="clickArea(this)">
                  <a class="areaItem" id=${value.record_id}>${value.chn_name}</a>
                  <span style="display: none">11</span>
                </li>
                `
                CaseDom.append(Html);
            }
          })
        }
        else {}
      }
    })
  }
  areaRender()
/* 点击地区高亮展示当前 */
 function clickArea(obj){
   $(".areaItem").removeClass('cur')
   var showEle = $(obj)
   // 获取a标签上的id
   areaId = showEle.children().attr('id')
   showEle.children().addClass('cur')
 }
</script>