通过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 ...
随机推荐
- VLC命令行的应用
vlc -vvv rtsp://218.204.223.237:554/live/1/0547424F573B085C/gsfp90ef4k0a6iap.sdp --sout #transcode{v ...
- rnqoj-28-合唱队形-最长上升子序列
想当年大一的时候,一个最长上升子序列的问题使得我的罚时上升了不少....当年还是图样啊 这道题目本质就是求最长上升子序列 #include<stdio.h> #include<str ...
- 【HDOJ】4541 Ten Googol
打表的大水题. /* 4541 */ #include <cstdio> #include <cstdlib> #include <cstring> , , , } ...
- zookeeper[3] zookeeper API开发注意事项总结
如下是根据官方接口文档(http://zookeeper.apache.org/doc/r3.4.1/api/org/apache/zookeeper/ZooKeeper.html#register( ...
- Python偏函数实例
目标: 1.编写一个gui,生成按钮 2.通过偏函数,生成按钮 3.通过装饰器,实现按钮输出信息功能 1.使用Tkinter,创建一个按钮 代码如下: handetiandeMacBook-Pro:~ ...
- uvalive 4851 Restaurant(扫描法)
题意:有一个M*M的网格,坐标[0...M-1,0...M-1] 网格里面有两个y坐标同样的宾馆A和B.以及n个餐厅,宾馆AB里面各有一个餐厅,编号1,2,其它餐厅编号3-n.如今你打算新开一家餐厅. ...
- 三、Solr多核心及分词器(IK)配置
多核心的概念 多核心说白了就是多索引库.也可以理解为多个"数据库表" 说一下使用multicore的真实场景,比若说,产品搜索和会员信息搜索,不使用多核也没问题,这样带来的问题是 ...
- [RxJS] Creation operator: of()
RxJS is a lot about the so-called "operators". We will learn most of the important operato ...
- [React Testing] The Redux Store - Multiple Actions
When using Redux, we can test that our application state changes are working by testing that dispatc ...
- qemu-img 快照的一些总结
qemu-img 快照的一些总结 http://www.openext.org/2014/06/qemu-img-snapshot-re http://blog.csdn.net/muge0913/a ...