jQuery+JSON實(shí)現(xiàn)AJAX二級聯(lián)動(dòng)實(shí)例分析

更新時(shí)間：2015年12月18日 15:25:57 作者：匆匆夏日

這篇文章主要介紹了jQuery+JSON實(shí)現(xiàn)AJAX二級聯(lián)動(dòng)的方法,以實(shí)例形式分析了前臺jQuery結(jié)合ajax傳遞json格式數(shù)據(jù)及后臺數(shù)據(jù)處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)的點(diǎn)贊隨機(jī)數(shù)字顯示動(dòng)畫效果(附在線演示與demo源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的點(diǎn)贊隨機(jī)數(shù)字顯示動(dòng)畫效果,并附帶在線演示與demo源碼供讀者下載.涉及jQuery鼠標(biāo)事件響應(yīng)及基于animate動(dòng)畫效果實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-12-12
JQuery 動(dòng)畫卷頁返回頂部動(dòng)畫特效(兼容Chrome)
JQuery 動(dòng)畫卷頁返回頂部動(dòng)畫特效(兼容Chrome) ,學(xué)習(xí)jquery的朋友可以測試下。
2010-02-02
jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程
這篇文章主要介紹了jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程,本文講解了從WFC編程到JQUERY調(diào)用的詳細(xì)步驟,并總結(jié)了使用中遇到的問題和解決方法,需要的朋友可以參考下
2015-03-03
jQuery 刪除或是清空某個(gè)HTML元素示例
刪除HTML元素可以使用remove及empty，下面有關(guān)這兩個(gè)方法的使用將以示例的方式為大家介紹下
2014-08-08
jquery通過closest選擇器修改上級元素的方法
這篇文章主要介紹了jquery通過closest選擇器修改上級元素的方法,實(shí)例分析了jQuery中closest選擇器的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
jquery實(shí)現(xiàn)拖拽添加元素功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)拖拽添加元素功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
jQuery實(shí)現(xiàn)的簡單圖片輪播效果完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單圖片輪播效果,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合時(shí)間函數(shù)與隨機(jī)數(shù)運(yùn)算操作頁面元素動(dòng)態(tài)變換相關(guān)實(shí)現(xiàn)技巧,具有不動(dòng)方向滑動(dòng)、淡入淡出等切換效果,代碼非常簡單實(shí)用,需要的朋友可以參考下
2018-02-02
jQuery中數(shù)據(jù)緩存$.data的用法及源碼完全解析
這篇文章主要介紹了jQuery中的數(shù)據(jù)緩存$.data的用法及源碼完全解析,深入解讀了jQuery對緩存對象的讀寫和移除的實(shí)現(xiàn),需要的朋友可以參考下
2016-04-04
jQuery輪播圖效果精簡版完整示例
這篇文章主要介紹了jQuery輪播圖效果精簡版,結(jié)合完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件及針對頁面元素的遍歷操作相關(guān)技巧,需要的朋友可以參考下
2016-09-09
jquery實(shí)現(xiàn)刷新隨機(jī)變化樣式特效（tag標(biāo)簽樣式）
本文主要介紹了tag標(biāo)簽隨機(jī)多彩變化的超鏈接樣式，使用JQ+DIV+CSS實(shí)現(xiàn)刷新隨機(jī)變化樣式特效。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02