ajax实现动态下拉框示例


Posted in Javascript onJanuary 10, 2017

许多页面上都涉及有下拉框,即select标签。对于简单的下拉框,被选择的数据是不需要改变的,我们可以用<option></option>写死。这样下拉框的数据永远都是那几条。

示例:

<select>
   <option>信息一</option>
   <option>信息二</option>
   <option>信息三</option>
   <option>信息四</option>
 </select>

但是有些项目或者工程是需要将数据库中的数据呈现出来并提供选择的,下拉的内容会随数据库中数据的变化而变化。首先我们有asp组件可以帮我们做这这件事情,DropDownList组件,只需要将数据库中查询得到的数据添加进该组件中,在前台即可以显示出动态下拉的效果。如果想更有新意,不依赖于传统组件,ajax就是个不错的选择。下面一步步来通过ajax实现动态下拉的效果。

1.js发出ajax请求:

$(document).ready(function () {
  $.ajax({
    timeout: 3000,
    async: false,
    type: "POST",
    url: "WareHouse.ashx",
    dataType: "json",
    data: {
      warehouse: $("#issued_sub_key_c").val(),
    },
    success: function (data) {
      for (var i = 0; i < data.length; i++) {
        $("#issued_sub_key_c").append("<option>" + data[i].Name + "</option>");
      }
    }
  });
});

ajax请求WareHouse.ashx(一般处理程序)来获得数据,请求成功后将返回的json数据附加到id为issued_sub_key_c的select标签。值得注意的是这里将async的属性改为了false,async的默认状态为true,即为异步。值改为false就是同步了。但是当async为false的时候,ajax请求完数据之前,浏览器一直处于锁死状态,这样会让使用者认为程序崩溃了,所以就人为的添加了一个超时(timeout),这样就不会出现程序崩溃的假象。回到话题开始,为什么要将async改为false呢?原因就是当ajax是异步请求的时候进入到页面后出现下拉框数据还未同步,下拉框是空白数据(可以自己体验体验)。所以我们需要利用同步的特性并配合超时来完成下拉框的数据同步。

2.一般处理程序:从数据库返回的数据是List<string>类型,我们需要自己定义一个toJson()方法将list转化为json数据,然后返回json数据。

public string toJson(List<string> str)
    {
      StringBuilder json = new StringBuilder();

      if (str == null)
      {
        return "null";

      }

      json.Append("[");
      foreach (var item in str)
      {
        json.Append("{\"Name\":\"");
        json.Append(item);
        json.Append("\"},");
      }

      return json.ToString().Substring(0, json.ToString().LastIndexOf(",")) + "]";
    }


    /*得到并关联仓库(select标签)*/

    public void ProcessRequest(HttpContext context)
    {

      SubinventoryDC subinventorydc = new SubinventoryDC();

      List<string> list = new List<string>();

      list = subinventorydc.getAllSubinventory();

      string json = toJson(list);

      context.Response.ContentType = "text/plain";

      context.Response.Write(json);
    }

3.前台页面:前台只需要定义一个id为issued_sub_key_c的select标签。注意select标签须得有一个name,后台正是通过name来取得选中数据的值。取值方法:Request.Form["issued_sub_key_c"]。

<select id="issued_sub_key_c" name="issued_sub_key_c">
 </select>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript显示随机图像或引用
Apr 21 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
Vue组件化开发思考
Feb 02 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 #Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 #Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 #Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 #Javascript
jQuery验证表单格式的使用方法
Jan 10 #Javascript
Html5 js实现手风琴效果
Apr 17 #Javascript
jquery做个日期选择适用于手机端示例
Jan 10 #Javascript
You might like
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
Python协程的用法和例子详解
2017/09/09 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
django API 中接口的互相调用实例
2020/04/01 Python
浅谈react路由传参的几种方式
2021/03/23 Javascript
医生自荐信
2013/10/11 职场文书
测绘工程系学生的自我评价
2013/11/30 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
钱学森观后感
2015/06/04 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏