ajax实现动态下拉框示例(ajax动态加载json数据)

编辑：rootadmin

推荐整理分享ajax实现动态下拉框示例(ajax动态加载json数据)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:ajax动态传参数,ajax动态请求,ajax前端动态加载,ajax动态刷新页面,ajax动态传参数,ajax动态加载json数据,ajax动态加载数据,ajax动态请求,内容如对您有帮助，希望把文章链接给更多的朋友！

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

示例：

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

1.js发出ajax请求：

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

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

标签: ajax动态加载json数据

本文链接地址:https://www.jiuchutong.com/biancheng/373890.html 转载请保留说明！

上一篇：jQuery验证表单格式的使用方法(jqueryvalidate验证)

下一篇：jQuery使用ajax方法解析返回的json数据功能示例