通过监听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选项动态异步加载内容的更多相关文章

  1. iframe异步加载技术及性能

    我们会经常使用iframes来加载第三方的内容.广告或者插件.使用iframe是因为它可以和主页面并行加载,不会阻塞主页面.当然使用iframe也是有利有弊的:Steve Souders在他的blog ...

  2. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  3. JavaScript异步加载的三种方式——async和defer、动态创建script

    一.script标签的位置 传统的做法是:所有script元素都放在head元素中,必须等到全部js代码都被下载.解析.执行完毕后,才能开始呈现网页的内容(浏览器在遇到<body>标签时才 ...

  4. Win8 Metro动态加载内容框架

    制作背景 为了参加ImagineCup 2013 世界公民类比赛,我们设计制作了一个可动态扩展的幼教类App.这个App需要能动态加载内容,内容包括带动画可交互的电子书,动画,视频,游戏. 技术支持 ...

  5. 动态加载（异步加载）jquery/MUI类库 页面加载完成后加载js类库

    动态加载Mui类库: // ==UserScript== // @name // @version 1.4.0 // @author zzdhidden@gmail.com // @namespace ...

  6. 如何调试异步加载的js文件（浏览器调试动态加载js）

    描述 1:jQuery->var obj= new $.js_Obj():等异步加载js文件,执行方法. obj.method(): 2:页面估计不变,通过声明不同的js文件,进行页面内容的转换 ...

  7. MVC中实现部分内容异步加载

    MVC中实现部分内容异步加载 action中定义一个得到结果集的方法 public ActionResult GetItemTree(string title, int itemid, int? pa ...

  8. 利用Crowbar抓取网页异步加载的内容 [Python俱乐部]

    利用Crowbar抓取网页异步加载的内容 [Python俱乐部] 利用Crowbar抓取网页异步加载的内容 在做 Web 信息提取.数据挖掘的过程中,一个关键步骤就是网页源代码的获取.但是出于各种原因 ...

  9. 在ASP.NET中动态加载内容（用户控件和模板）

    在ASP.NET中动态加载内容(用户控件和模板) 要点: 1． 使用Page.ParseControl 2． 使用base.LoadControl 第一部分:加载模板 下 面是一个模板“<tab ...

随机推荐

  1. ASCII、Unicode、GBK和UTF-8字符编码的区别联系[转]

    http://dengo.org/archives/901 这是我看过的最好的一篇讲述编码的文章 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们看到 ...

  2. git仓库迁移和更新远程仓库地址

    一.git仓库迁移 1,从原仓库clone或pull到本地仓库 git clone project_name ​[old_remote_repository_address] 2,​在新的git创建一 ...

  3. crontab,at命令,常见问题

    crontab命令 前 一天学习了 at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,linux系统则是由 cron (crond) 这个系统服务来控制的. Linux 系统上面原本就有非常 ...

  4. 2014-07-31　ASP.NET的母版页使用

    今天是在吾索实习的第17天.我在这天主要负责系统的骨架的搭建.首当其冲,要用的知识点就是ASP.NET母版页的使用了. ASP.NET的母版页有两种:一种是MasterPage,最常用也是最普通的母版 ...

  5. Acdream1157---Segments （CDQ分治）

    陈丹琦分治~~~其实一些数据小的时候可以用二维或者多维树状数组做的,而数据大的时候就无力的题目,都可以用陈丹琦分治解决. 题目:由3钟类型操作:1)D L R(1 <= L <= R &l ...

  6. windows 删除服务命令

    在dos窗口下执行 sc delete  服务名( 例如 mysql) C:\Program Files\MySQL\MySQL Server 5.6\

  7. JS(四)

    JS的属性好多,方法好多,一下子塞进来真的需要时间消化,很多东西都是当时记得很清楚,但忘得很快,看来需要经常去复习,主要是感觉后面一点的练习题好像少了点,所以就显得不是很熟练. 1.About Tim ...

  8. linux安装mysql5.1.56

    1.编译安装 > groupadd mysql #创建mysql组 > useradd -g mysql mysql #创建用户mysql并添加到mysql组中,这个用户主要是作为mysq ...

  9. CAEmitterLayer实现粒子效果

    在iOS 5中,苹果引入了一个新的CALayer子类叫做CAEmitterLayer.CAEmitterLayer是一个高性能的粒子引擎,被用来创建实时例子动画如:烟雾,火,雨等等这些效果. CAEm ...

  10. C++ Win32控制台应用程序捕捉关闭事件

      #include#includebool ctrlhandler( DWORD fdwctrltype ){    switch( fdwctrltype )    {    // handle ...