• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax实现列表无限加载和二级下拉选项效果

    Ajax做列表无限加载和Ajax做二级下拉选项,供大家参考,具体内容如下

    //栏目Ajax做加载
    public function ajaxlist(){
     //echo "http://www.域名.com/index.php?a=Indexc=Indexm=ajaxlist";
     //echo "hr>";
     $data = Q('sum');
     $where = array();
     $where['cid'] = 33;
     $rongyuList = M('content')->limit($data,2)->where($where)->select();
     $data['stat'] = 1;
     $data = $rongyuList;
     $this->ajax($data);
     //也可以手动把想要的字段拼接成字符串 
     /*echo "[";
     foreach($rongyuList as $k){
      echo "{"."\""."title"."\"".":"."\"".$k['title']."\"".","."\""."description"."\"".":"."\"".$k['description']."\"".","."\""."cid"."\"".":"."\"".$k['cid']."\""."}".",";  
     }
     echo "]";*/
     }
    
    

    具体页面实现:

    script type='text/javascript'>
    /*ajax*/
    (function(){
    //发送数据 
    var url = "__WEB__"+"?a=Indexc=Indexm=ajaxlist";
    var oSum = ''; 
    $('a.ajaxBut').click(function(){
     oSum = $('div.zizhiListContBox>a').size();
     $.post(url,{sum:oSum},function(result){
     console.log(result);
     eval("var info="+result);
     for(var key in info){
       oStr = "a href='"+"__WEB__"+"?a=Indexc=Indexm=contentmid=1cid=33aid="+info[key]['aid']+""+"'>h3 class='f100 f16 ts500'>"+info[key]['title']+"/h3>p>"+info[key]['description']+"/p>span class='b parb'>/span>/a>";
       $('div.zizhiListContBox').append(oStr);
     };
     });
    });
    })();
    /script>
    

    Ajax 做二级选项:

    !-- 示例:HTML -->
    dl class="pr keshi" >
     dt class="pa">科室:/dt>
     dd class="pa">
      select name='keshi' class='m_keshi'>
       option value='0'>--请选择科室--/option>
      /select>
      select name='zhuanjia' class='m_zhuanjia'>
       option>--请选择专家--/option>
      /select>
     /dd>
    /dl>
    

    示例控制器:

    //示例控制器
    /* Ajax请求栏目列表 */
    public function ajaxlanmu(){
     $lanmuList = M('category')->where('pid=142')->select();
     $this->ajax($lanmuList);
    }
    public function ajaxzhuanjia(){
     $where = array();
     $data = Q('sum');
     $data = $data ? $data : 143;
     $where['cid'] = $data;
     $zhuanjiaList = M('guahao')->where($where)->select();
     $this->ajax($zhuanjiaList);
    }
    

    示例:JS

    script>
    (function(){
    var lanmuUrl = "__WEB__"+"?a=Indexc=Indexm=ajaxlanmu";
    var zhuanjiaUrl = "__WEB__"+"?a=Indexc=Indexm=ajaxzhuanjia";
    var oSum = oStr = oStr2 = oVal = oKong = info2 = oCid = '';
    /* lanmu */
    $.post(lanmuUrl,function(result){
     eval("var info="+result);
     for(var key in info){oStr += "option value='"+info[key]['catname']+"' cid='"+info[key]['cid']+"'>"+info[key]['catname']+"/option>";};
     $('dl.keshi').find('select.m_keshi').append(oStr);
    });
    /* zhuanjia */
    $('dl.keshi').find('select.m_keshi').change(function(){
     oVal = $(this).find('option:selected').val();
     if(oVal == 0){
      $('dl.zhuanjia').find('select.m_zhuanjia').html("option>--请选择专家--/option>");
     }else{
      oCid = $(this).find('option:selected').attr('cid');
      $.post(zhuanjiaUrl,{sum:oCid},function(result){
       eval("info2="+result);
       oStr2 = '';//注意这里要清空第一次请求的数据
       for(var key2 in info2){
        oStr2 += "option value='"+info2[key2]['title']+"'>"+info2[key2]['title']+"/option>";    
       };
       $('dl.zhuanjia').find('select.m_zhuanjia').html(oStr2);
      });
     };
    });
    })();
    /script>
    
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • jQuery+AJAX实现无刷新下拉加载更多
    • 用ajax动态加载需要的js文件
    • php+ajax+jquery实现点击加载更多内容
    • php+ajax实现无刷新动态加载数据技术
    • jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
    • Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
    • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
    • java AJAX实现级联下拉框
    • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
    • php+ajax做仿百度搜索下拉自动提示框(有实例)
    上一篇:Ajax提交表单并接收json实例代码
    下一篇:JavaScript操作表单_动力节点Java学院整理
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax实现列表无限加载和二级下拉选项效果 Ajax,实现,列表,无限,加载,