Ajax做列表无限加载和Ajax做二级下拉选项
//栏目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&c=Index&m=content&mid=1&cid=33&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做二级下拉选项的更多相关文章
- Qt实现小功能之列表无限加载
概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...
- Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)
概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...
- SageCRM 页面加载完后,用下拉框联动修改放大镜字段的取值范围
原理很简单就是修改放大镜属性中的sql. 函数如下:第一个参数是字段的名称.第二个参数是需要控制这个放大镜的sql.可以跟进下拉框的值来组织这个sql. /*--------------- For C ...
- Vue中实现一个无限加载列表
参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- Jquery ajax ajaxStart()和ajaxStop()加载前的优雅表现
Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函 ...
- 网页异步加载之AJAX理解
AJAX AJAX介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种用于创建快速动态网页的技术 AJAX ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 图片预加载和AJAX的图片预加载
利用js实现图片预加载,加载所需要图片的路径与名称即可,很容易实现,该方法尤其适用预加载大量的图片: <div class="hidden"> <script t ...
随机推荐
- MVC多语言设置 实战简洁版
此方式可以通过更改进行更改进程语言设定,支持从系统获取默认的区域设定,支持自定义,自定义的方式可以为cookie,可为资料库获取,session等方式. 具体怎么设定就看个人需要了. 第一步: 添加资 ...
- Python打包-Pyinstaller
我们知道,Python很优雅,很值得学习.但是Python是解释性语言,代码需要有Python解释器才能执行,相比较我们平时直接运行exe等可执行文件多了一步的麻烦. 于是,希望能将Python程序打 ...
- linux 按照端口一句命令杀死进程,按照进程名称一句命令杀死进程
例如杀死nginx 按照程序名称杀死进程 例如杀死nginx的进程 ps -aux|grep nginx|grep -v grep|cut -c 9-15|xargs kill -9 或者 ps -a ...
- POJ 3273 Monthly Expense(二分搜索)
Description Farmer John is an astounding accounting wizard and has realized he might run out of mone ...
- 关于WPF自定义控件(导航)
1.在WPF中自定义控件(1)概述 2.在WPF中自定义控件(2) UserControl 3.在WPF中自定义控件(3) CustomControl (上) 4.在WPF中自定义控件(3) Cust ...
- Linux-selinux
查看SELinux状态: 1./usr/sbin/sestatus -v ##如果SELinux status参数为enabled即为开启状态 SELinux status: ...
- 【代码审计】CLTPHP_v5.5.3前台XML外部实体注入漏洞分析
0x01 环境准备 CLTPHP官网:http://www.cltphp.com 网站源码版本:CLTPHP内容管理系统5.5.3版本 程序源码下载:https://gitee.com/chichu/ ...
- Top 20 NuGet packages for captcha
Top 20 NuGet packages for captcha CaptchaMvc.Mvc4 CaptchaMvc will implement your web MVC application ...
- Java 数据库访问层
最近项目中需要对mysql进行操作,数据库的知识早在本科毕业那会就忘光了,这几年开发都没接触到数据库的操作. 借这个机会重新学习,数据库访问层是对数据库操作的一个封装,屏蔽底层的数据操作细节,通过使用 ...
- Win10 虚拟桌面
我们可以建立多个桌面,各个桌面上运行的窗口任务互不干扰,这就是虚拟桌面 创建虚拟桌面:Win + Ctrl + D查看虚拟桌面:Win + Tab删除当前虚拟桌面:Win + Ctrl + F4切换到 ...