//栏目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. [转] Linux常用命令大全(非常全!!!)

    出处:https://www.cnblogs.com/yjd_hycf_space/p/7730690.html Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得 ...

  2. c++单例设计模式---17

    原创博文,转载请标明出处--周学伟  http://www.cnblogs.com/zxouxuewei/ 全局变量在项目中是能不用就不用的,它是一个定时炸弹,是一个不安全隐患,特别是在多线程程序中, ...

  3. Batch Normalization 学习笔记

    原文:http://blog.csdn.net/happynear/article/details/44238541 今年过年之前,MSRA和Google相继在ImagenNet图像识别数据集上报告他 ...

  4. 随笔 -- IO -- Socket/ServerSocket -- 系统概述

    随笔 -- IO -- Socket/ServerSocket -- Echo(BIO)实例 Java 网络编程 网络编程是指编写运行在多个设备(计算机)的程序,这些设备都通过网络连接起来. java ...

  5. Java NIO原理 图文分析及代码实现

    Java NIO原理图文分析及代码实现 前言:  最近在分析hadoop的RPC(Remote Procedure Call Protocol ,远程过程调用协议,它是一种通过网络从远程计算机程序上请 ...

  6. NetBpm 测试篇(3)

    http://www.netbpm.org/movie/holiday/holiday.html

  7. 基于net.tcp的WCF配置实例解析(转)

    http://www.cnblogs.com/scy251147/archive/2012/11/23/2784902.html 原文 本文主要通过文件配置来讲解如何编写一个基于net.tcp的Win ...

  8. PHP 5.4 中的traits

    PHP 5.4中的traits,是新引入的特性,中文还真不知道如何准确翻译好.其实际的目的,是为了有的场合想用多继承,但PHP又没多继承,于是就发明了这样的一个东西. Traits (横向重用/多重继 ...

  9. VS中自定义代码段

    如果数据属性的数量比较多,那么输入总是要花费较多的时间,这里有个小技巧,就是使用快捷的输入方法,但是VS自身提供的代码段是有限的,幸运的是我们可以通过:工具> 代码段管理器>添加来添加自定 ...

  10. iOS开发之-- 字符串的操作,去掉某一个字符或者替换成其他字符

    一个简单的操作,记录下: NSString *strUrl = [urlString stringByReplacingOccurrencesOfString:@" " withS ...