A-A+

jQuery AJAX下拉框表单的实现例子

2016年01月12日 前端设计 暂无评论 阅读 5 views 次

AJAX下拉框表单是在表单中绑定了改变事件了,当A改变时B的列表根据A条件进行查询返回并显示数据了,具体例子如下,最近在开发一个小东西的时候出现这么一个需求,根据 AJAX 请求的数据生成下拉框表单。

这个需求经常会出现,比如全球范围内地址的选择,全球所有国家的省份和城市是一堆不小的数据,而且表单还不一定会被使用。这时可以考虑先加载一个空表单,在用户点击的时候再用 AJAX 把数据加载进来;或者先加载所有国家的列表,然后根据用户选择的国家再加载对应的省份和城市数据。

再比如一些必须使用 AJAX 加载下拉框表单的地方。像 CDK 兑换,需要用户填写 CDK 之后再根据 CDK 适用的范围生成下拉框表单。

实现这个功能是比较简单的,但是我们要说的是如何更加高效的实现这个功能。

HTML 表单

在 AJAX 获取并生成数据之前,首先需要一个空的或者存在内容的 HTML 下拉框表单用来填充数据:

  1. <select id="dropdown">  
  2.   <option value="">请选择...</option>  
  3.  </select>  

AJAX 获取数据,接下来我们可以开始使用 AJAX 获取数据了,在使用 jQuery 的情况下,AJAX 获取数据非常简单方便。

获取数据的时机可以是在用户点击表单的时候、用户设置其它表单的内容的时候或者其它时候。

  1. $.ajax( {  
  2.   type: 'GET',  
  3.   url: AJAXurl,  
  4.   dataType: 'json',  
  5.   success: function( data ){  
  6.    build_dropdown( data, $( '#dropdown' ), '请选择...' );//填充表单  
  7.   }  
  8.  } );  

使用 AJAX 请求 AJAXurl 的地址之后将返回一个 JSON 对象,接下来我们需要解析这些数据,把他填充到下拉框表单里,这里使用了自定义方法 build_dropdown()。

填充表单

在上边用 ajax((www.xiariboke.net)) 方法获取到数据之后,使用 build_dropdown() 方法填充了表单数据,这里我们就来创建这个方法:

  1. //填充表单  
  2.  var build_dropdown = function( data, element, defaultText ){  
  3.   element.empty().append( '<option value="">' + defaultText + '</option>' );  
  4.   if( data ){  
  5.    $.each( data, function( key, value ){  
  6.     element.append( '<option value="' + key + '">' + value + '</option>' );  
  7.    } );  
  8.   }  
  9.  }  

这个方法用三个参数,分别是表单数据(JSON 对象)、需要被填充数据的表单和默认空选项的文本。

到这里就可以完成一个 AJAX 获取数据并生成下拉框表单的过程了。

数据格式

AJAX 获取的表单数据为 JSON 对象,格式类似于:

  1. {  
  2.   'USA'    : '美国',   
  3.  'China'  : '中国',   
  4.  'Japan'  : 'www.xiariboke.net',   
  5.  'Germany': '德国',   
  6.  'Britain': '英国',   
  7.  'France' : '法国',   
  8.  'Korea'  : '韩国'  
  9.  }  

可以使用 PHP 的 json_encode() 函数,把 PHP 数据变成我们需要的 JSON 对象数据:

  1. echo json_encode( array(  
  2.   'USA'     => '美国',  
  3.   'China'   => '中国',  
  4.   'Japan'   => 'www.xiariboke.net',  
  5.   'Germany' => '德国',  
  6.   'Britain' => '英国',  
  7.   'France'  => '法国',  
  8.   'Korea'   => '韩国'  
  9.  ) );  
标签:

给我留言