博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax实现动态下拉框
阅读量:6089 次
发布时间:2019-06-20

本文共 2532 字,大约阅读时间需要 8 分钟。

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

  示例:

1 

  但是有些项目或者工程是需要将数据库中的数据呈现出来并提供选择的,下拉的内容会随数据库中数据的变化而变化。首先我们有asp组件可以帮我们做这这件事

情,DropDownList组件,只需要将数据库中查询得到的数据添加进该组件中,在前台即可以显示出动态下拉的效果。如果想更有新意,不依赖于传统组件,ajax就是

个不错的选择。下面一步步来通过ajax实现动态下拉的效果。

 

  1.js发出ajax请求:

1 $(document).ready(function () { 2     $.ajax({ 3         timeout: 3000, 4         async: false, 5         type: "POST", 6         url: "WareHouse.ashx", 7         dataType: "json", 8         data: { 9             warehouse: $("#issued_sub_key_c").val(),10         },11         success: function (data) {12             for (var i = 0; i < data.length; i++) {13                 $("#issued_sub_key_c").append("");14             }15         }16     });17 });

   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数据。

1 public string toJson(List
str) 2 { 3 StringBuilder json = new StringBuilder(); 4 5 if (str == null) 6 { 7 return "null"; 8 9 }10 11 json.Append("[");12 foreach (var item in str)13 {14 json.Append("{\"Name\":\"");15 json.Append(item);16 json.Append("\"},");17 }18 19 return json.ToString().Substring(0, json.ToString().LastIndexOf(",")) + "]";20 }21 22 23 /*得到并关联仓库(select标签)*/24 25 public void ProcessRequest(HttpContext context)26 {27 28 SubinventoryDC subinventorydc = new SubinventoryDC();29 30 List
list = new List
();31 32 list = subinventorydc.getAllSubinventory();33 34 string json = toJson(list);35 36 context.Response.ContentType = "text/plain";37 38 context.Response.Write(json);39 }

   

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

法:Request.Form["issued_sub_key_c"]。

1 

 

  可以看到,实现动态下拉框的方法多样,在满足实际情况的条件下,选择就看个人喜好了。

 

转载于:https://www.cnblogs.com/SunshineAgain/p/5784182.html

你可能感兴趣的文章
Nginx 介绍
查看>>
Bat相关的项目应用
查看>>
NativeClient开发指南
查看>>
游戏人物属性如何设计
查看>>
Docker源码分析(五):Docker Server的创建
查看>>
谈谈Java异常处理这件事儿
查看>>
Java中泛型Class<T>、T与Class<?>
查看>>
Django为数据库的ORM写测试例(TestCase)
查看>>
面向对象的三个基本特征(讲解)
查看>>
Linux定时任务Crontab命令详解
查看>>
判断窗口是否挂起
查看>>
(轉貼) LCD入門常識
查看>>
LPC2103开发板WDT看门狗测试试验
查看>>
101与金根回顾敏捷个人:(11)执行力
查看>>
Orchard:把之前写的Map Content Part专为一个Widget来使用
查看>>
25组精品图标分享,适合2011风格网站制作使用
查看>>
精至手机药典iPhone版
查看>>
MFC CSplitterWnd的用法
查看>>
玩转Android TabWidget(切换卡)
查看>>
asp.net中使用一般处理程序生成验证码
查看>>