通过监听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. MemSQL 3.1 发布，元方，你怎么看？ - V2EX

    MemSQL 3.1 发布,元方,你怎么看? - V2EX MemSQL 3.1 发布,元方,你怎么看?

  2. 广州Uber优步司机奖励政策（12月28日到1月3日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. Groovy简洁开发，我用到的简洁之处

    最近一直在用Groovy开发以前的项目,一边学习一边开发,工具用的是IDEA(欲哭无泪,不熟悉真是搞死人).......由于我做的是服务层,是为公司其它项目做服务支撑的,所以就没有用框架,只有一些se ...

  4. RequireJS进阶（三）

    进阶的前面两篇讲述了r.js如何通过命令行把所有的模块压缩为一个js文件或把所有的css压缩为一个css文件.其中包括一些压缩配置参数的使用. 但以上两种方式有几个问题 1.通过命令手动配置压缩选项显 ...

  5. Python爬虫实战（一）

    今天,学习了爬虫的基础知识,尝试着写了本人的第一个小爬虫——爬取糗百上的热门段子.一开始自己做的是爬取1-35页,每页20条段子的作者.点赞数和内容,代码很简陋,贴在下面: #!/usr/bin/en ...

  6. [原创作品]一个实用的js倒计时器 postby:zhutty.cnblogs.com

    今天做了一个手机短信发送倒计时,额,就是每隔多长时间可以重新发送的功能.贡献出来给园有吐槽点评. //倒计时,time:时长(秒),scb:每秒回调,cb:计时完成回调 var timing = fu ...

  7. django: db - admin

    本讲演示简单使用 Django Admin 功能. 一,修改 settings.py,添加 admin 应用: INSTALLED_APPS = ( 'django.contrib.auth', 'd ...

  8. MVC 5 下，应用log4net收集异常信息

    1.安装log4net. 首先在VS中通过nuget安装logenet,我用的是VS2013,截屏如下:

  9. @Html.Partial,@Html.Action,@Html.RenderPartial,@Html.RenderAction

    1.带有Render的方法返回值是void,在方法内部进行输出: 不带的返回值类型为MvcHtmlString,所以只能这样使用: @Html.Partial 对应 @{Html.RenderPart ...

  10. 来自GitHub的Android UI开源项目

    最近在搞Android开发,做了一个项目后感觉,Android开发入门很是简单,但要能做出用户体验比较完美的APP实在是一件很不容易的事情!要达到一定的水准,估计还需要慢慢的积累,这里先保存一个Git ...