织梦模板建站、织梦仿站，推荐选跟版网(专业织梦模板定制下载站)，您可以把织梦模板网：
跟版网(www.genban.org)是专业的DEDECMS模板下载和定制开发服务商！
织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果
& &以下内容您可能感兴趣： &
织梦dedecms实现点击下拉加载更多主要用到ajax技术。具体步骤如下：
一、首先找到并打开/plus/list.PHP文件，在里面找到如下代码：
require_once(dirname(__FILE__).&/../include/common.inc.php&);
在这段代码下面添加以下代码：
//列表页瀑布流无限加载代码
if(isset($_GET['ajax'])){
& & $typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;//传递过来的分类ID
& & $page = isset($_GET['page']) ? intval($_GET['page']): 0;//页码
& & $pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 15;//每页多少条，也就是一次加载多少条数据
& & $start = $page&0 ? ($page-1)*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。
& & $typesql = $typeid ? & WHERE typeid=$typeid& : '';//这个是用于首页实现瀑布流加载，因为首页加载数据是无需分类的，所以要加以判断，如果无需
& & $total_sql = &SELECT COUNT(id) as num FROM `dede_archives` $typesql &;
& & $temp = $dsql-&GetOne($total_sql);
& & $total = 0;//数据总数
& & $load_num =0;
& & if(is_array($temp)){
& & & & $load_num= round(($temp['num']-15)/$pagesize);//要加载的次数,因为默认已经加载了
& & & & $total = $temp['num'];
& & $sql = &SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
& & t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath
& & FROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id $typesql ORDER BY id DESC LIMIT $start,$pagesize&;
& & $dsql-&SetQuery($sql);
& & $dsql-&Execute('list');
& & $statu = 0;//是否有数据，默认没有数据
& & $data = array();
& & $index = 0;
& & while($row = $dsql-&GetArray(&list&)){
& & & & $row['info'] = $row['info'] = $row['infos'] = cn_substr($row['description'],160);
& & & & $row['id'] = &$row['id'];
& & & & $row['filename'] = $row['arcurl'] = GetFileUrl($row['id'],
& & & & $row['typeid'],$row['senddate'],$row['title'],$row['ismake'],
& & & & $row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],
& & & & $row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']);
& & & & $row['typeurl'] = GetTypeUrl($row['typeid'],$row['typedir'],
& & & & $row['isdefault'],$row['defaultname'],$row['ispart'],
& & & & $row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);
& & & & if($row['litpic'] == '-' || $row['litpic'] == ''){
& & & & & & $row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';
& & & & if(!preg_match(&#^http:\/\/#i&, $row['litpic']) &&$GLOBALS['cfg_multi_site'] == 'Y'){
& & & & & & $row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic'];
& & & & $row['picname'] = $row['litpic'];//缩略图
& & & & //$row['stime'] = GetDateMK($row['pubdate']);
& & & & $row['stime'] = date('Y-m-d H:i', $row['pubdate']);
& & & & $row['click'] = $row['click'];
& & & & $row['typelink'] = &&.$row['typename'].&&;//分类链
& & & & $row['fulltitle'] = $row['title'];//完整的标题
& & & & $row['shorttitle'] = $row['shorttitle'];//副标题
& & & & $row['title'] = cn_substr($row['title'], 80);//截取后的标题
& & & & $data[$index] = $
& & & & $index++;
& & if(!empty($data)){
& & & & $statu = 1;//有数据
& & $result =array('statu'=&$statu,'list'=&$data,'total'=&$total,'load_num'=&$load_num);
& & echo json_encode($result);//返回数据
& & exit();
二、然后在需要使用瀑布流无线加载的织梦dedecms模板里引用下面这个js代码（这个js大家应该不是很陌生，只要有用到JQ库函数的话一定要引用这个js）：
&script src=&/jQuery/1.9.0/jquery.js&&&/script&
三、并在模板底部添加以下代码：
&script type=&text/javascript&&
var loadConfig = {
& & & & & & & & url_api:'/plus/list.php',
& & & & & & & & typeid:{dede:field name=&typeid&/},
& & & & & & & & page:2,
& & & & & & & & pagesize:15, &//这个就是滑动一次添加几条信息的参数设置
& & & & & & & & loading : 0,
& & & & & & & & }
function &loadMoreApply(){
& & if(loadConfig.loading == 0){
& & & & &var typeid = loadConfig.
& & & & &var page = loadConfig.
& & & & &var pagesize = loadConfig.
& & & & &var url = loadConfig.url_api,data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize};
& & & & &var sTop = document.body.scrollTop || document.documentElement.scrollTop, dHeight = $(document).height(), cHeight = document.documentElement.clientH
& & & & &console.log(dHeight);
& & & & & & &&
& & & & &if (sTop + cHeight &= dHeight - cHeight) {
& & & & & & &loadConfig.loading = 1;
& & & & & & function ajax(url, data) {
& & & & & & & & & & &
& & & & & & & & $.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) {
& & & & & & & & & & addContent(data); &
& & & & & & & & }});
& & & & & & }
& & & & & & ajax(url,data);
&function addContent (rs){
& & if(rs.statu== 1){
& & & & var data = rs.
& & & & var total = rs.
& & & & var arr=[];
& & & & var length = data.
& & & & for(var i=0;i&i++){
& & & & & & arr.push('&a href=&'+data[i].arcurl+'& title=&'+data[i].title+'&&');
& & & & & & arr.push('&dl class=&yz_card&&');
& & & & & & arr.push('&dt class=&yz_card_dt&&');
& & & & & & arr.push('&img src=&'+data[i].picname+'& alt=&'+data[i].title+'&&');
& & & & & & arr.push('&/dt&');
& & & & & & arr.push('&dd class=&yz_card_dd&&');
& & & & & & arr.push('&p class=&yz_card_p&&'+data[i].title+'&/p&');
& & & & & & arr.push('&div class=&yz_card_icon&&');
& & & & & & arr.push('&span class=&yz_comment&&');
& & & & & & arr.push(data[i].click); & & & & & & & & & & & & & &
& & & & & & arr.push('&em class=&yz_icon_comment&&&img src=&/templets/default/images/pingluan.png& height=&14&&&/em&');
& & & & & & arr.push('&/span&');
& & & & & & arr.push('&/div&');
& & & & & & arr.push('&div class=&yz_datetime&&'+data[i].stime+'&/div&');
& & & & & & arr.push('&/dd&');
& & & & & & arr.push('&/dl&');
& & & & & & arr.push('&/a&');
& & & & $('.arclist').append(arr.join(''));
& & & & loadConfig.load_num = rs.load_
& & & & if(total&loadConfig.page*loadConfig.pagesize || loadConfig.page & loadConfig.load_num){
& & & & & & window.removeEventListener('srcoll',loadMoreApply,false);
& & & & loadConfig.page++;
& & & & loadConfig.loading = 0;
function pullLoad(){
& & window.addEventListener('scroll', loadMoreApply, false);
pullLoad();
上面的代码中的$('.arclist').append(arr.join(''));里的arclist对应模板内列表的外框class属性。
arr.push部分对应的是列表中单篇文章的代码。
如果在首页只需把代码中的&typeid:{dede:field name=&typeid&/}& 修改为&typeid:0,&即可。
到此织梦dedecms瀑布流无限加载就实现了。
跟版网-专业织梦模板下载平台，转载请注明出处：
& &精心为您推荐： &
& &邀您关注： &
扫描左侧二维码即可在手机端访问此页面
扫描左侧二维码即可关注跟版网官方微信公众号，获取金币模板，还可以免费仿站哦！
扫描左侧二维码即可加入跟版网官方群，免费获取金币资源并可以与其他织梦高手共同交流学习
跟版网率先实现织梦的三网合一网站，从即日起（）日，跟版网会陆续免费分享一批金币资源给需要的朋友，关注本站认证官方微信公众账号并回复相应的提取码，系统会自动将下载地址发送给您，同时这些金币资源也会分享在官方的QQ群中，欢迎各位朋友踊跃加入。另外本站后期会每周选择大家比较喜欢的网站仿制，并免费分享给大家，还有免费送金币活动哦！
- dede源码分享
售价:40金币
- dede模板分享
售价:0金币
- 织梦html5模板
售价:0金币
- dede源码分享
售价:60金币
- dede源码分享
售价:120金币
& & & 跟版网竭力打造中国最大的织梦源码和织梦模板商城，我们有一批经验丰富的设计师和程序员，发展五年，跟版网拥有丰富的织梦模板，欢迎您的咨询，我们将竭诚为您提供最优质的服务。
& & & 跟版网织梦源码商城坚持“创意+品质+服务”的高端理念，运用创意设计的理念为您塑造高品质的网络品牌形象。凭借五年的探索和实践，跟版网织梦源码商城拥有一支经验丰富、技术精湛、尽职尽责的网络服务团队。精品网站建设，从跟版网织梦源码商城建站开始。
& & & 跟版网织梦源码和模板可分为两种形式获得，一种是官方源码，另外一种是会员共享源码。两种源码都分为免费和收费两种形式。
& & & 跟版网官方收费源码可通过支付费用获得，具体操作流程可查看网址：。会员共享源码可通过共享模板获取金币下载。如觉得麻烦，可以联系客服QQ：进行金币充值，充值后可随意下载。选择下拉框的一个选项后跳转时,怎么让跳转后的界面(原来界面刷新)的下拉框中元素是选择的那个请问一下,选择下拉框的一个选项后跳转时,怎么让跳转后的界面的下拉框中元素是选择的那个,以上是相关的js和jsp
选择下拉框的一个选项后跳转时,怎么让跳转后的界面(原来界面刷新)的下拉框中元素是选择的那个
请问一下,选择下拉框的一个选项后跳转时,怎么让跳转后的界面的下拉框中元素是选择的那个,以上是相关的js和jsp代码.然后我找了一下教程,在js中开头和结尾加了俩句,但是好像没用
下拉的onchange处理函数see()方法中你取得下拉列表选中的值存储到type变量，使用url(window.location.href=...)
传递这个参数type=选中值，迁移到本画面后会刷新本画面。
这个时候画面的js变量和属性值都会重新加载初期化。
要选中下拉列表的值：
此时，你应该在该画面的onload中追加一个函数，比如onLoadHandler()，
在函数onLoadHandler中从request中取得传入的参数type的值var type= 'request.getParameter("type")';
然后根据type的值来判断,让下拉列表选中和type值一样的索引。
解决方案二：
解决方案三：
如果是popup的方式打开，可以用window.dialogarguement
解决方案四：
为什么不用ajax而要用界面刷新
解决方案五：
下拉列表的onchange处理函数see()方法中你取得下拉列表选中的值存储到type变量，使用url(window.location.href=...)
传递这个参数type=选中值，迁移到本画面后会刷新本画面。
这个时候画面的js变量和属性值都会重新加载初期化。
要选中下拉列表的值：
此时，你应该在该画面的onload中追加一个函数，比如onLoadHandler()，
在函数onLoadHandler中从request中取得传入的参数type的值var type= 'request.getParameter("type")';
然后根据type的值来判断,让下拉列表选中和type值一样的索引。
解决方案六：
【云栖快讯】快速解决数据库难题，云数据库经典案例及最佳实践直播专场！阿里云数据库专家团队成员倾囊相授！赶紧报名。&&
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低 IT 成本...
RDS是一种稳定可靠、可弹性伸缩的在线数据库服务。支持MySQL、SQL Server、PostgreSQL、高...&>&&>&&>&&>&分别用四种Ajax工具实现下拉菜单动态刷新的DEMO
分别用四种Ajax工具实现下拉菜单动态刷新的DEMO
上传大小：740KB
该DEMO用四种目前流行Ajax工具实现下拉菜单的动态刷新
所设置的选择有三个，依次是学院，班级和学生姓名。
通过四种Ajax工具JQuery、JSON、DWR、Prototype分别实现页面与后台（类文件）的数据交互，从而使得在不刷新页面的情况下取得数据，改变Select框中的值。
进入主页后可以点击不同链接访问你想查看的DEMO
http://localhost:8080/ajaxtools/index.jsp...展开收缩
综合评分：4.1（22位用户评分）
所需积分：5
下载次数：93
审核通过送C币
创建者：qq_
创建者：sinat_
创建者：sinat_
课程推荐相关知识库
上传者其他资源上传者专辑
开发技术热门标签
VIP会员动态
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
分别用四种Ajax工具实现下拉菜单动态刷新的DEMO
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：我们在一些微博网站上可以碰到这样的应用，微博内容列表没有使用分页条，而是一次加载一定数量的记录显示在列表页，当用户浏览到列表页底部时，可以通过单击&查看更多&来加载更多记录。本文我将结合jQuery和给大家讲述如何实现这种应用。
基本原理：页面载入时，jQuery向后台请求数据，PHP通过查询将最新的几条记录显示在列表页，在列表页的底部有个&更多&链接，通过触发该链接，向服务端发送Ajax请求，后台PHP程序得到请求参数，并作出相应，获取数据库相应的记录并以JSON的形式返回给前台页面，前台页面jQuery解析JSON数据，并将数据追加到列表页。其实就是Ajax分页效果。
首先要引入jquery库和jquery.more.js插件，jquery.more.js已经将许多功能都封装好了，并提供了参数配置的功能。
&type=&text/javascript&&src=&jquery.js&&&type=&text/javascript&&src=&jquery.more.js&&
xhtml结构如下：
&id=&more&&&&&&&&class=&single_item&&&&&&&&&&&&&&class=&element_head&&&&&&&&&&&&&&&&&&class=&date&&&&&&&&&&&&&&&&&&class=&author&&&&&&&&&&&&&&&&&&&&&&&&&&&&class=&content&&&&&&&&&&&&&&href=&javascript:;&&class=&get_more&::点击加载更多内容::&&&
值得一提的是，样式single_item，get_more是和jquery.more.js插件关联的，你也可以取另外的class名字，但是在配置的时候一定要将对应的class写上。
#more{margin:10px&auto;width:&560px;&&border:&1px&solidϧ}&&&&&&&&&&&&&&&&.single_item{padding:&20px;&border-bottom:&1px&dotted&#d3d3d3;}&.author{position:&absolute;&left:&0px;&font-weight:bold;&color:#39f}&.date{position:&absolute;&right:&0px;&color:#999}&.content{line-height:20px;&word-break:&break-all;}&.element_head{width:&100%;&position:&relative;&height:&20px;}&.get_more{margin:10px;&text-align:center}&.more_loader_spinner{width:20px;&height:20px;&margin:10px&auto;&background:&url(loader.gif)&&no-repeat;}&
以上CSS是本例中定制的，当然，大家可以在实际项目中定制不同的样式。注意，more_loader_spinner是定义加载动画图片的。
$(function(){&&&&&$('#more').more({'address':&'data.php'})&});&
使用很简单，配置了后台地址：data.php，来看data.php是怎么处理数据的。
data.php链接数据库，本例使用本站文章相同的数据表。
require_once('connect.php');&&$last&=&$_POST['last'];&$amount&=&$_POST['amount'];&&$user&=&array('demo1','demo2','demo3','demo3','demo4');&$query=mysql_query(&select&*&from&say&order&by&id&desc&limit&$last,$amount&);&while&($row=mysql_fetch_array($query))&{&&&&&$sayList[]&=&array(&&&&&&&&&'content'=&$row['content'],&&&&&&&&&'author'=&$user[$row['userid']],&&&&&&&&&'date'=&date('m-d&H:i',$row['addtime'])&&&&&&&);&}&echo&json_encode($sayList);&
data.php接收前台页面提交过来的两个参数，$_POST['last']即开始记录数，$_POST['amount']即单次显示记录数，看SQL语句就明白，其实就是分页中用到的语句。
然后将查询的结果以JSON格式输出，PHP的任务就完成了。
最后来看下jquery.more.js的参数配置。
'amount'&&&&&&:&&&'10',&&&&&&&&&&&&'address'&&&&&:&&&'comments.php',&&'format'&&&&&&:&&&'json',&&&&&&&&&&'template'&&&&:&&&'.single_item',&&'trigger'&&&&&:&&&'.get_more',&&&&&'scroll'&&&&&&:&&&'false',&&&&&&&&&'offset'&&&&&&:&&&'100',&&&&&&&&&&&
也许你会喜欢和关注与本文内容高度相关的文章：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
不错 学习了！
爱奇趣分享网
不错的网站，很喜欢，期待互访
歪妖内涵网
不错，值得收藏分享！
最励志官网
很久没有过来了，今天过来看一看！
了未发生的
ie下不可用，哎。
.............&下面我演示两个相关联的列表框，一个是&省份&列表框，另外一个是省份的&城市&列表框，当单击&省份&下拉框时，&城市&下拉框会随之改变，将显示所选择省份内的城市。服务器端在接收到页面传来的省份数据后，根据省份数据组织相应的城市数据，并将城市数据以 XML 文件的形式发送到客户端。该XML 文件格式很简单，格式清单：
&?xml version="1.0" encoding="gb2312" ?& &citys&&& &city&&&&& &id&&/id& &&&& &name&&/name& && &/city&&/citys&
&&&&& 在这里我为了精简代码，所以用一个哈希表模拟了服务器端的数据库。将事先定义好的 XML 数据直接以省份值为主键存入数据库中，在从客户端接收到省份值时，再查询哈希表取得对应的值。Java 中的哈希表类似数学中的函数，比如：y = f(x) ，根据 x 就能确定 y 的值，在 map 里就是 map.put("x","y"); map.get("x") == y。其实就是一一映射关系，key &------& value ， 每个key对应一个value 知道了key也就知道了value 。另外还有一个JS的对象要向大家介绍：
一、Option 对象
var e = document.getElementById("selectId");
e.options = new Option("文本", "值");&&&& //创建一个option对象，即在&select&标签中创建一个或多个&option value="值"&文本&/option&。options是一个数组，里面可存放多个&option value="值"&文本&/option&标签。
◆options数组的属性
length&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 长度
selectedIndex&&&&&&&&&&&&&&&&&&&&&&&&&& 当前被选中文本的索引号，此索引值是内存自动分配的(0,1,2,3.......)对应(第一个标签，第二个标签，第三个标签.......)
◆单个option的属性
text&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 返回指定文本
value&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 返回指定值
index&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 返回下标
selected&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 返回指定对象是否被选中，指定true反之false，可动态改变选中项
defaultSelected&&&&&&&&&&&&&&&&&&&&&&&& 返回该对象默认是否被选中，选中true反之false
◆option的方法
增加一个&option&标签&&&&&&&&&&&&&& obj.options.add(new("文本", "值"))
删除一个&option&标签&&&&&&&&&&&&&& obj.options.remove(obj.selectedIndex);
获取一个&option&标签&&&&&&&&&&&&&& obj.options[obj.selectedIndex].
修改一个&option&标签&&&&&&&&&&&&&& obj.options[obj.selectedIndex] = new Option("新文本", "值");
删除所有&option&标签&&&&&&&&&&&&&& obj.options.length = 0;
获取一个&option&标签的值&&&&&&& obj.options[obj.selectedIndex].
obj.option中的option不需要大写
new Option中的option一定要大写
本例共写了 AjaxJS.js 脚本、dropDownListServer.jsp 后台处理、index.jsp 客户端三个文件。
AjaxJS.js 脚本代码：
//==========================================================全局变量区开始(XMLHttpRequest对象)var xmlH//==========================================================全局变量区结束
/*================================================================================Function:&&&&&& 创建XMLHttpRequest对象函数Description:&&& 根据浏览器创建XMLHttpRequest对象Calls:&&&&&&&&& 无Called By:&&&&& selectChngeTable Accessed: 无Table Updated:&& 无Table Deleted: 无Input:&&&&&&&&& 无Output:&&&&&&&& xmlHttpReturn:&&&&&&&& 无Create:&&&&&&&& /YJ/创建函数Modify:&&&&&&&& 无Others:&&&&&&&& 无================================================================================*/&!--function createXMLHttpRequest(){if(window.ActiveXObject){&& xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}else{&& if(window.XMLHttpRequest)&& {&&& xmlHttp = new XMLHttpRequest();&& }}}//--&
/*================================================================================Function:&&&&&& 提交函数Description:&&& 根据选择的省份向服务器提交Calls:&&&&&&&&& showcitysCalled By:&&&&& 无Table Accessed: 无Table Updated:&& 无Table Deleted: 无Input:&&&&&&&&& 控件的IDOutput:&&&&&&&& 无Return:&&&&&&&& 无Create:&&&&&&&& /YJ/创建函数Modify:&&&&&&&& 无Others:&&&&&&&& 无================================================================================*/function selectChnge(controlID){var city = document.getElementById(controlID).
if(city != "null"){&& createXMLHttpRequest();&& var url = "dropDownListServer.jsp?city="+&& xmlHttp.open("GET", url, true);&& xmlHttp.onreadystatechange =&& xmlHttp.send(null);}}
/*================================================================================Function:&&&&&& 返回城市列表函数Description:&&& 根据提交的省份返回城市列表Calls:&&&&&&&&& 无Called By:&&&&& selectChngeTable Accessed: 无Table Updated:&& 无Table Deleted: 无Input:&&&&&&&&& 无Output:&&&&&&&& 无Return:&&&&&&&& 无Create:&&&&&&&& /YJ/创建函数Modify:&&&&&&&& 无Others:&&&&&&&& 无================================================================================*/function showcitys(){if(xmlHttp.readyState == 4){&& if(xmlHttp.status == 200)&& {&&& var cityData = xmlHttp.responseXML.getElementsByTagName("city");&&& var citySelect = document.getElementById("city");&&& citySelect.options.length = 0;
&&& for(var i = 0; i & cityData. i++)&&& {&&&& var cityName = cityData[i].childNodes[0].firstChild.nodeV&&&& var cityID = cityData[i].childNodes[1].firstChild.nodeV&&&& var option = new Option(cityID, cityName);&&&&&&&& try&&&& {&&&&& citySelect.add(option);&&&& }&&&& catch(e)&&&& {&&&&& alert(e);&&&& }&&& }&& }&& else&& {&&& alert("您请求的页面有异常！");&& }}}
dropDownListServer.jsp 后台处理代码：
&%@ page contentType="text/charset=gb2312" %&&%@ page import="java.util.*" %&&%String stDepart = request.getParameter("city");
if(stDepart == null){&& stDepart = "p1";}StringBuffer sb = new StringBuffer();//解决中文乱码问题sb.append("&?xml version='1.0' encoding='gb2312'?&");sb.append("&citys&");//创建哈希表模拟服务器端数据库Map map = new HashMap();String p1 = "&city&&id&10001&/id&&name&成都&/name&&/city&&city&&id&10002&/id&&name&达州&/name&&/city&&city&&id&10003&/id&&name&绵阳&/name&&/city&&city&&id&10004&/id&&name&乐山&/name&&/city&&city&&id&10005&/id&&name&遂宁&/name&&/city&&city&&id&10006&/id&&name&攀枝花&/name&&/city&";String p2 = "&city&&id&20001&/id&&name&郑州&/name&&/city&&city&&id&20002&/id&&name&洛阳&/name&&/city&&city&&id&20003&/id&&name&开封&/name&&/city&&city&&id&20004&/id&&name&安阳&/name&&/city&&city&&id&20005&/id&&name&南阳&/name&&/city&";String p3 = "&city&&id&30001&/id&&name&南京&/name&&/city&&city&&id&30002&/id&&name&徐州&/name&&/city&&city&&id&30003&/id&&name&苏州&/name&&/city&&city&&id&30004&/id&&name&常州&/name&&/city&&city&&id&30005&/id&&name&扬州&/name&&/city&";String p4 = "&city&&id&40001&/id&&name&长沙&/name&&/city&&city&&id&40002&/id&&name&株洲&/name&&/city&&city&&id&40003&/id&&name&岳阳&/name&&/city&";String p5 = "&city&&id&50001&/id&&name&荆州&/name&&/city&&city&&id&50002&/id&&name&荆门&/name&&/city&&city&&id&50003&/id&&name&黄石&/name&&/city&&city&&id&50004&/id&&name&武汉&/name&&/city&";map.put("p1", p1);map.put("p2", p2);map.put("p3", p3);map.put("p4", p4);map.put("p5", p5);//根据选择的省份查询对应的城市sb.append((String)map.get(stDepart).toString());sb.append("&/citys&");response.setContentType("text/xml");out.write(sb.toString());%&
index.jsp 客户端代码：
&%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&&%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%&&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&&html&&head&&&& &base href="&%=basePath%&"&&&& &title&Ajax 动态加载列表框&/title&&meta http-equiv="pragma" content="no-cache"&&meta http-equiv="cache-control" content="no-cache"&&meta http-equiv="expires" content="0"&&&& &meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&&meta http-equiv="description" content="This is my page"&&script language="javascript" type="text/javascript" src="./Resources/AjaxJS.js"&&/script&&/head&&body&&center&&& 省份: && &select id="province" onChange="selectChnge('province')"&&&& &option value="null"&---------请选择---------&/option&&&& &option value="p1"&四川省&/option&&&& &option value="p2"&海南省&/option&&&& &option value="p3"&江苏省&/option&&&& &option value="p4"&湖南省&/option&&&& &option value="p5"&湖北省&/option&&& &/select&&&&&&&& 城市:&& &select id="city" style="width:150"&&& &/select&&/center&&/body&&/html&
阅读(...) 评论()}