通过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 ...
随机推荐
- 进化计算简介和遗传算法的实现--AForge.NET框架的使用（六）
原文:进化计算简介和遗传算法的实现--AForge.NET框架的使用(六) 开学了,各种忙起来了… 上一篇介绍了AForge.NET在人工神经网络上的一点点使用,但是老觉不过瘾.matlab用着实在不 ...
- uboot之board.c源码分析
/lib_arm/board.c 主要完成了一些初始化的操作,最重要的是有start_armboot函数 _armboot_start地址为多少?? /* * * U-Boot code: 00F00 ...
- 【转】如何判断CPU是大端还是小端模式
原文网址:http://blog.csdn.net/ysdaniel/article/details/6617458 如何判断CPU是大端还是小端模式 http://blog.sina.com.cn/ ...
- iOS 9之New UIKit for International User Interfaces
金田 Apple一直是注重用户体验的典范,而此次在UI上面,更是做到极致.此次iOS 9的发布能完全支持阿拉伯语.希伯来语等书写和阅读方式为从右向左的语言环境.不仅仅是简单的基础文本,而是支持将界面翻 ...
- Codeforces Round #277.5 (Div. 2) --E. Hiking (01分数规划)
http://codeforces.com/contest/489/problem/E E. Hiking time limit per test 1 second memory limit per ...
- Linux开关机命令详解
Linux系统的开关机主要涉及(shutdown,reboot,poweroff,halt,init)这几条命令,本文对其使用详解如下: 一.命令简介 shutdown,poweroff,reboot ...
- Nmon 监控 Linux 的系统性能
Nmon(得名于 Nigel 的监控器)是IBM的员工 Nigel Griffiths 为 AIX 和 Linux 系统开发的一款计算机性能系统监控工具.Nmon 可以把操作系统的统计数据展示在屏幕上 ...
- RHEL修改主机名和IP
1, 修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=NEWHOSTNAME #修改该值作为主机名,如:NEWPC ...
- 从 Windows 到 Android： 威胁的持续迁移
作者:趋势科技 新闻媒体现在正喧腾着 OBAD 这个 Android 恶意软件,这也是到目前为止,Android 恶意软件中“最坏”,同时也是“最先进的 Android 木马程序”.除了各种强大的功能 ...
- [React] React Router: hashHistory vs browserHistory
In this lesson we'll look at hashHistory which uses a hash hack to track our route changes vs browse ...