jQuery+JSON實(shí)現(xiàn)AJAX二級聯(lián)動(dòng)實(shí)例分析
本文實(shí)例講述了jQuery+JSON實(shí)現(xiàn)AJAX二級聯(lián)動(dòng)的方法。分享給大家供大家參考,具體如下:
后臺Handler.ashx
<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.Data; public class Handler : IHttpHandler { Common coObj = new Common(); public void ProcessRequest(HttpContext context) { if (context.Request.Params["n"] != null) { string num = context.Request.Params["n"].ToString(); context.Response.ContentType = "text/plain"; string str = "select * from address where a_num2=" + num; DataTable dt = coObj.GetTable(str); string json = JSONHelper.DataTableToJSON(dt); context.Response.Write(json); } } public bool IsReusable { get { return false; } } }
前臺dropdownlist.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>dropdownlit </title> <meta name="Generator" content="EditPlus" /> <script type="text/javascript" src="js/jquery-1.5.2.js"></script> <script type="text/javascript"> $(function(){ InitData(0); }); function InitData(n) { $.ajax({ type:"POST", dataType:"json", url: "Handler.ashx", data:{"n":n}, success:function(json){ $.each(json,function(i,n){ var pro=$("#dl1"); $(""+ n.A_Name +"").appendTo(pro); }); } }); } function GetCity(n) { var city=$("#dl2"); city.html(""); $.ajax({ type:"POST", dataType:"json", url: "Handler.ashx", data:{"n":n}, success:function(json){ $.each(json,function(i,n){ $(""+ n.A_Num1 +">"+ n.A_Name +"").appendTo(city); }); } }); } </script> </head> <body> <select id="dl1" onchange="GetCity(this.value)"> </select> <select id="dl2"> </select> </body> </html>
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
- 使用Ajax和Jquery配合數(shù)據(jù)庫實(shí)現(xiàn)下拉框的二級聯(lián)動(dòng)的示例
- jquery基于layui實(shí)現(xiàn)二級聯(lián)動(dòng)下拉選擇(省份城市選擇)
- 基于jquery實(shí)現(xiàn)二級聯(lián)動(dòng)效果
- 幾種二級聯(lián)動(dòng)案例(jQuery\Array\Ajax php)
- jquery實(shí)現(xiàn)二級導(dǎo)航下拉菜單效果
- jquery實(shí)現(xiàn)簡單的二級導(dǎo)航下拉菜單效果
- jQuery實(shí)現(xiàn)帶延遲的二級tab切換下拉列表效果
- jQuery實(shí)現(xiàn)可高亮顯示的二級CSS菜單效果
- 如何使用Jquery動(dòng)態(tài)生成二級選項(xiàng)列表
相關(guān)文章
使用Jquery搭建最佳用戶體驗(yàn)的登錄頁面之記住密碼自動(dòng)登錄功能(含后臺代碼)
今天將登錄功能徹底完成,加入記住密碼自動(dòng)登錄功能,密碼在客戶端進(jìn)行第一次加密存儲。并修改了一些bug,優(yōu)化js代碼,上一版本太亂了。2011-07-07jQuery給指定的table動(dòng)態(tài)添加刪除行的操作方法
今天在項(xiàng)目中,剛好用到給指定的table添加一行、刪除一行。添加一行,支持在任意行添加一行且可配置的,刪除一行支持動(dòng)態(tài)刪除一行。本文給大家介紹的非常詳細(xì),一起看看吧2016-10-10jQuery實(shí)現(xiàn)下拉加載功能實(shí)例代碼
本文通過一段實(shí)例代碼給大家介紹jquery實(shí)現(xiàn)下拉加載功能,代碼簡單易懂,需要的朋友參考下吧2016-04-04jQuery源碼分析之jQuery.fn.each與jQuery.each用法
這篇文章主要介紹了jQuery源碼分析之jQuery.fn.each與jQuery.each用法,較為詳細(xì)的分析了each的用法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01jQuery中$this和$(this)的區(qū)別介紹(一看就懂)
這篇文章主要介紹了jQuery中$this和$(this)的區(qū)別介紹(一看就懂),本文用簡潔的語言講解了它們之間的區(qū)別,并給出了一個(gè)例子來說明,需要的朋友可以參考下2015-07-07jquery1.4 教程一 便利的設(shè)置函數(shù)
jquery1.4已經(jīng)發(fā)布了,1.4相對于1.32的改進(jìn)還是非常巨大的,可以說是全面性的,性能也全面超越了1.32。這一周,將一一展示jquery1.4的改進(jìn),同時(shí)也會(huì)放出相應(yīng)的demo。2010-02-02