通过监听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. YII增加全局函数

    法1: 在使用Yii开发中我们经常会遇到一个问题,每次使用Yii的组件.扩展等,我们会像下面一样去写: <?php Yii::app()->user; Yii::app()->get ...

  2. UVA 195 Anagram

    题意:求输入字符串的所有组合,按字典序输出! 解法:使用枚举(枚举前先找出最字符串的最小字典序)枚举时加上枚举生成条件! #include <iostream> #include < ...

  3. 使用MapReduce查询Hbase表指定列簇的全部数据输出到HDFS（一）

    package com.bank.service; import java.io.IOException; import org.apache.hadoop.conf.Configuration;im ...

  4. mysql中文名字按首字母排序

    在mysql数据库中可以使用GBK编码对中文进行排序,如名字按首字母排序 order by convert(substr(tu.username,1,1) using 'GBK') 其中substr方 ...

  5. Java_io体系之PipedWriter、PipedReader简介、走进源码及示例——14

    Java_io体系之PipedWriter.PipedReader简介.走进源码及示例——14 ——管道字符输出流.必须建立在管道输入流之上.所以先介绍管道字符输出流.可以先看示例或者总结.总结写的有 ...

  6. HybridApp开发准备工作——WebView

    如大家所见,手机真是越来越离不开我们的日常生活了,像我,现在出门必带的是手机.移动电源.公交卡:钱包什么的再也没出过门.两年前,我还在Android的应用开发中当了一次过客.嗯,当时JAVA学得太糟糕 ...

  7. Quartz中时间表达式的设置-----corn表达式

    Quartz中时间表达式的设置-----corn表达式 时间格式: <!-- s m h d m w(?) y(?) -->,   分别相应: 秒>分>小时>日>月 ...

  8. mysql Encryption and Compression Functions

    Name Description AES_DECRYPT() Decrypt using AES AES_ENCRYPT() Encrypt using AES COMPRESS() Return r ...

  9. 邮件协议（SMTP）性能测试总结（Foxmail邮箱）

    先介绍一下邮件协议SMTP的工作机制(连接和发送过程),用wireshark工具抓包进行分析,如下: SMTP协议的工作机制(连接和发送过程): 1.建立TCP连接,并将邮件服务器地址给客户端: 2. ...

  10. Python-xml解析常用方法简介

    [XML几种解析方法] 常见的XML编程接口有DOM和SAX,这两种接口处理XML文件的方式不同,使用场合自然也就不同. Python有三种方法解析XML: SAX,DOM,以及ElementTree ...