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 相关文章推荐
document.documentElement的一些使用技巧
Apr 18 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
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
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
discuz目录文件资料汇总
2014/12/30 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
python Celery定时任务的示例
2018/03/13 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
python画环形图的方法
2020/03/25 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
学习方法演讲稿
2014/05/10 职场文书
电子专业自荐信
2014/07/01 职场文书
老员工辞职信范文
2015/05/12 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python