jQuery+JSON實現(xiàn)AJAX二級聯(lián)動實例分析
更新時間:2015年12月18日 15:25:57 作者:匆匆夏日
這篇文章主要介紹了jQuery+JSON實現(xiàn)AJAX二級聯(lián)動的方法,以實例形式分析了前臺jQuery結合ajax傳遞json格式數(shù)據(jù)及后臺數(shù)據(jù)處理技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery+JSON實現(xiàn)AJAX二級聯(lián)動的方法。分享給大家供大家參考,具體如下:
后臺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程序設計有所幫助。
您可能感興趣的文章:
相關文章
使用Jquery搭建最佳用戶體驗的登錄頁面之記住密碼自動登錄功能(含后臺代碼)
今天將登錄功能徹底完成,加入記住密碼自動登錄功能,密碼在客戶端進行第一次加密存儲。并修改了一些bug,優(yōu)化js代碼,上一版本太亂了。2011-07-07jQuery給指定的table動態(tài)添加刪除行的操作方法
今天在項目中,剛好用到給指定的table添加一行、刪除一行。添加一行,支持在任意行添加一行且可配置的,刪除一行支持動態(tài)刪除一行。本文給大家介紹的非常詳細,一起看看吧2016-10-10jQuery源碼分析之jQuery.fn.each與jQuery.each用法
這篇文章主要介紹了jQuery源碼分析之jQuery.fn.each與jQuery.each用法,較為詳細的分析了each的用法,非常具有實用價值,需要的朋友可以參考下2015-01-01jQuery中$this和$(this)的區(qū)別介紹(一看就懂)
這篇文章主要介紹了jQuery中$this和$(this)的區(qū)別介紹(一看就懂),本文用簡潔的語言講解了它們之間的區(qū)別,并給出了一個例子來說明,需要的朋友可以參考下2015-07-07