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 OOP类与继承
Nov 15 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
详解JavaScript中new操作符的解析和实现
Sep 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实现的RSS生成类实例
2015/04/23 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
python使用socket远程连接错误处理方法
2015/04/29 Python
Python版微信红包分配算法
2015/05/04 Python
Python快速排序算法实例分析
2017/11/29 Python
用Python解决x的n次方问题
2019/02/08 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
python爬虫要用到的库总结
2020/07/28 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
小学教师事迹材料
2014/01/13 职场文书
表扬通报怎么写
2015/01/16 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
HTML中的表格元素介绍
2022/02/28 HTML / CSS
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers