//栏目Ajax做加载
public function ajaxlist(){
//echo "http://www.域名.com/index.php?a=Index&c=Index&m=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=Index&c=Index&m=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=Index&amp;c=Index&amp;m=content&amp;mid=1&amp;cid=33&amp;aid="+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=Index&c=Index&m=ajaxlanmu";
var zhuanjiaUrl = "__WEB__"+"?a=Index&c=Index&m=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>

Ajax做列表无限加载和Ajax做二级下拉选项的更多相关文章

  1. Qt实现小功能之列表无限加载

    概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...

  2. Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)

    概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...

  3. SageCRM 页面加载完后,用下拉框联动修改放大镜字段的取值范围

    原理很简单就是修改放大镜属性中的sql. 函数如下:第一个参数是字段的名称.第二个参数是需要控制这个放大镜的sql.可以跟进下拉框的值来组织这个sql. /*--------------- For C ...

  4. Vue中实现一个无限加载列表

    参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...

  5. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  6. Jquery ajax ajaxStart()和ajaxStop()加载前的优雅表现

    Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函 ...

  7. 网页异步加载之AJAX理解

    AJAX AJAX介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种用于创建快速动态网页的技术 AJAX ...

  8. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. 图片预加载和AJAX的图片预加载

    利用js实现图片预加载,加载所需要图片的路径与名称即可,很容易实现,该方法尤其适用预加载大量的图片: <div class="hidden"> <script t ...

随机推荐

  1. MVC多语言设置 实战简洁版

    此方式可以通过更改进行更改进程语言设定,支持从系统获取默认的区域设定,支持自定义,自定义的方式可以为cookie,可为资料库获取,session等方式. 具体怎么设定就看个人需要了. 第一步: 添加资 ...

  2. Python打包-Pyinstaller

    我们知道,Python很优雅,很值得学习.但是Python是解释性语言,代码需要有Python解释器才能执行,相比较我们平时直接运行exe等可执行文件多了一步的麻烦. 于是,希望能将Python程序打 ...

  3. linux 按照端口一句命令杀死进程,按照进程名称一句命令杀死进程

    例如杀死nginx 按照程序名称杀死进程 例如杀死nginx的进程 ps -aux|grep nginx|grep -v grep|cut -c 9-15|xargs kill -9 或者 ps -a ...

  4. POJ 3273 Monthly Expense(二分搜索)

    Description Farmer John is an astounding accounting wizard and has realized he might run out of mone ...

  5. 关于WPF自定义控件(导航)

    1.在WPF中自定义控件(1)概述 2.在WPF中自定义控件(2) UserControl 3.在WPF中自定义控件(3) CustomControl (上) 4.在WPF中自定义控件(3) Cust ...

  6. Linux-selinux

    查看SELinux状态: 1./usr/sbin/sestatus -v      ##如果SELinux status参数为enabled即为开启状态 SELinux status:         ...

  7. 【代码审计】CLTPHP_v5.5.3前台XML外部实体注入漏洞分析

    0x01 环境准备 CLTPHP官网:http://www.cltphp.com 网站源码版本:CLTPHP内容管理系统5.5.3版本 程序源码下载:https://gitee.com/chichu/ ...

  8. Top 20 NuGet packages for captcha

    Top 20 NuGet packages for captcha CaptchaMvc.Mvc4 CaptchaMvc will implement your web MVC application ...

  9. Java 数据库访问层

    最近项目中需要对mysql进行操作,数据库的知识早在本科毕业那会就忘光了,这几年开发都没接触到数据库的操作. 借这个机会重新学习,数据库访问层是对数据库操作的一个封装,屏蔽底层的数据操作细节,通过使用 ...

  10. Win10 虚拟桌面

    我们可以建立多个桌面,各个桌面上运行的窗口任务互不干扰,这就是虚拟桌面 创建虚拟桌面:Win + Ctrl + D查看虚拟桌面:Win + Tab删除当前虚拟桌面:Win + Ctrl + F4切换到 ...