通过select选项动态异步加载内容
通过监听select的change事件来异步加载数据。
1：效果图：
选择Good:
选择 Bad:
2：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{ border: 1px solid black;list-style: none;padding: 0px;margin: 0px;float: left;width: 300px;}
li{ padding: 10px 5px;border-bottom: 1px solid black;}
</style>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#choice').change(function(){
if($(this).val()!=''){
$.get(
'data.php',
{what:$(this).val()},
function(data){
$('#result').html(data);
}
);
}else{
$('#result').html('');
}
});
});
</script>
</head>
<body>
<form>
<p>Show list of:
<select id="choice">
<option value="">select</option>
<option value="g">Good</option>
<option value="b">Bad</option>
</select>
</p>
<p id="result"></p>
</form>
</body>
</html>
3:服务端 data.php
<?php
if($_GET['what']=='g'){
$names=array('张三','李四','王无');
echo getHTML($names);
}else if($_GET['what']=='b'){
$names=array('喇嘛','本拉登','小泉');
echo getHTML($names);
} function getHTML($names){
$strRes='<ul>';
$count=count($names);
for($i=0;$i<$count;$i++){
$strRes.='<li>'.$names[$i].'</li>';
}
$strRes.='</ul>';
return $strRes;
}
?>
通过select选项动态异步加载内容的更多相关文章
- iframe异步加载技术及性能
我们会经常使用iframes来加载第三方的内容.广告或者插件.使用iframe是因为它可以和主页面并行加载,不会阻塞主页面.当然使用iframe也是有利有弊的:Steve Souders在他的blog ...
- Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块
传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...
- JavaScript异步加载的三种方式——async和defer、动态创建script
一.script标签的位置 传统的做法是:所有script元素都放在head元素中,必须等到全部js代码都被下载.解析.执行完毕后,才能开始呈现网页的内容(浏览器在遇到<body>标签时才 ...
- Win8 Metro动态加载内容框架
制作背景 为了参加ImagineCup 2013 世界公民类比赛,我们设计制作了一个可动态扩展的幼教类App.这个App需要能动态加载内容,内容包括带动画可交互的电子书,动画,视频,游戏. 技术支持 ...
- 动态加载（异步加载）jquery/MUI类库 页面加载完成后加载js类库
动态加载Mui类库: // ==UserScript== // @name // @version 1.4.0 // @author zzdhidden@gmail.com // @namespace ...
- 如何调试异步加载的js文件（浏览器调试动态加载js）
描述 1:jQuery->var obj= new $.js_Obj():等异步加载js文件,执行方法. obj.method(): 2:页面估计不变,通过声明不同的js文件,进行页面内容的转换 ...
- MVC中实现部分内容异步加载
MVC中实现部分内容异步加载 action中定义一个得到结果集的方法 public ActionResult GetItemTree(string title, int itemid, int? pa ...
- 利用Crowbar抓取网页异步加载的内容 [Python俱乐部]
利用Crowbar抓取网页异步加载的内容 [Python俱乐部] 利用Crowbar抓取网页异步加载的内容 在做 Web 信息提取.数据挖掘的过程中,一个关键步骤就是网页源代码的获取.但是出于各种原因 ...
- 在ASP.NET中动态加载内容（用户控件和模板）
在ASP.NET中动态加载内容(用户控件和模板) 要点: 1． 使用Page.ParseControl 2． 使用base.LoadControl 第一部分:加载模板 下 面是一个模板“<tab ...
随机推荐
- Codeforces Round #300 F - A Heap of Heaps （树状数组 OR 差分）
F. A Heap of Heaps time limit per test 3 seconds memory limit per test 512 megabytes input standard ...
- sicily 4378 connected components in undirected graph
题意:求图中的连通块数,注意孤立的算自连通! 例如:6个顶点3条路径,其中路径为:1->2 4->5 1->3 那么有(1-2&&1->3) + (4- ...
- 动态sql语句
当需要根据外部输入的参数来决定要执行的SQL语句时,常常需要动态来构造SQL查询语句,个人觉得用得比较多的地方就是执行搜索查询的SQL语句.对于搜索,可能要根据搜索条件判断来动态执行SQL语句. 在S ...
- appium新版本不支持findElementByName，切换到findElementByAndroidUIAutomator
appium 1.7.6 不支持findElementByName(locator) 不知道为什么? 脚本中许多这样的语句,麻烦事情多了 org.openqa.selenium.InvalidSel ...
- 计算app内部缓存文件大小
#pragma mark - 计算单个文件大小 - (long long)fileSizeAtPath:(NSString*)filePath{ NSFileManager* manager = [N ...
- Mongodb 条件查询
1.1 查询出所有数据的指定键(name ,age ,country) db.persons.find({},{name:1,age:1,country:1,_id:0}) 2.查询条件 2.查询条件 ...
- ACdream 1417 Numbers
pid=1417">题目链接~~> 做题感悟:比赛的时候用的广搜,然后高高兴兴的写完果断TLE .做题的时候不管什么题都要用笔画一下,模拟几组数据,这样或许就AC了(做题经验,有 ...
- redis 源代码分析(一) 内存管理
一,redis内存管理介绍 redis是一个基于内存的key-value的数据库,其内存管理是很重要的,为了屏蔽不同平台之间的差异,以及统计内存占用量等,redis对内存分配函数进行了一层封装,程序中 ...
- POJ3692 Kindergarten 【最大独立集】
Kindergarten Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 5317 Accepted: 2589 Desc ...
- arcpagelistarclist列表分页
arcpagelistarclist列表分页 (DedeCMS 5.6) 名称:arcpagelist 功能:通过制定arclist的pagesize及tagid属性,配合arcpagelist标签进 ...