通过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 ...
随机推荐
- 给你讲个笑话，我是创业公司CEO
文/办公室奇葩说(Office 78)一个在办公室较为正经的八卦号. 前几天你看见朋友圈刷屏的文章<给你讲个笑话:我是做互联网的>. 你心想,写文章的那人是傻逼吗?觉得做互联网就是个笑 ...
- HDOJ 1302(UVa 573) The Snail(蜗牛爬井)
Problem Description A snail is at the bottom of a 6-foot well and wants to climb to the top. The sna ...
- 【李婶小教程】（SE_lab3）
额,今天说一下这个SE_lab3那几个东西都是怎么装的. 啊--其实技术含量貌似不是很高的. 1.先说最简单的一个叫做:Findbugs 点这个Eclipse Marketplace,这是一个神奇的东 ...
- 生成excel内存溢出问题的解决方式
常用的excel生成工具包括jxl.poi.但二者都存在一个问题:生成excel需要大量的消耗内存.如果一次性往excel中写入的数据足够的多将导致内存溢出. 1.数据写入excel为什么会大量的消耗 ...
- GF(2^8)乘法
最近在学AES,实现了一下伽罗瓦域(2^8)乘法. 至于什么是伽罗瓦域解释起来比较复杂,我也不一定能解释清楚,自行google.这里只是给出一个简单直观的实现. #include<iostrea ...
- 搭建Windows下Java Web开发环境
概要 1．SSH开发相关软件及开发包下载2．软件安装及相关设置3．最简单的Web程序 1.软件下载 在D盘建一个目录JavaTools,用来存放下载的软件和开发包.(本教程将使用D盘,你也可以使用 ...
- php中socket的使用 方法简介
一.开启socket phpinfo();查看是否开启了socket扩展,否则在php.ini中开启. 二.服务器端代码的写法 <?php error_reporting(E_ALL); set ...
- web前端技术
在网上找了点前端资料,记录下来,以便后面工作可能用到. Flat UI:一个WEB界面工具组件库.很多漂亮的菜单.按钮等. stickUp:一个jquery插件,可以将页面中的元素固定.经常用在把菜单 ...
- C语言学习笔记---谭浩强
前段时间有机会去面试了一次,真是备受“打击”(其实是启发),总的来说就是让我意识到了学习工具和学习技术的区别.所以最近在看一些数据结构和算法,操作系统,python中的并行编程与异步编程等东西.然而数 ...
- XAML 名称范围 (x:) 语言特性
本节介绍为 Windows 运行时实现的 XAML 语言特性的参考信息. 本部分内容 主题 描述 x:Class 属性 配置 XAML 编译,在标记和代码隐藏之间连接分部类.代码分部类在一个独立的代码 ...