在网站注册的页面上经常要选择注册地点,如果改变省的名称就能出现对应的市级的名称,将为用户带来很大的方便,虽然用.NET的服务端时间实现很容易,不过选一下刷新页面的操作,用户体验实在不怎么样,现在给大家送上AJAX实现的三级联动
代码有点多,但是实际的项目过程中,我们必须这么做
应要求,先给大家一个代码下载地址.DropDownList控件实现省市联动(AJAX实现) 。放心,偶得资源不要积分
首先在页面上初始化省的数据,添加onchange的js事件。。在用户改变地区选择的时候,调用JS函数(通过AJAX)调用后台C#代码,C#通过查询数据库,返回数据,并生成HTML,传给客户端,客户端在拿到HTML,放到相应的位置,即可。
jquery的ajax是异步的,这样不会阻塞浏览器,也不用刷新页面。
减少了网络开销也降低了服务器压力,最重要的是用户体验更好了。
首先,建立数据库,SQL如下:
然后,建立一个WebApplication的工程。
引入jquery.js。。新建3个文件Service.cs(数据库访问)、LinkageAjax.ashx(响应AJAX请求)、Default.aspx(联动页面)。如下图所示:
首先,编写Service.cs(数据库访问)代码:
然后是Default.aspx(联动页面)代码。
Default.aspx
Default.aspx.cs
最后是LinkageAjax.ashx(响应AJAX请求)的代码:
最后,贴给大家一点数据的INSERT语句: