编程 Javascript

jQuery+JSON实现AJAX二级联动实例分析

Posted in Javascript onDecember 18, 2015

本文实例讲述了jQuery+JSON实现AJAX二级联动的方法。分享给大家供大家参考，具体如下：

后台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+JSON实现AJAX二级联动实例分析

- Author -

匆匆夏日

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 写类方式之四

Jul 05 Javascript

Jquery 滑入滑出效果实现代码

Mar 27 Javascript

Jquery创建层显示标题和内容且随鼠标移动而移动

Jan 26 Javascript

Express.JS使用详解

Jul 17 Javascript

一张Web前端的思维导图分享

Jul 03 Javascript

JS实现焦点图轮播效果的方法详解

Dec 19 Javascript

JS二叉树的简单实现方法示例

Apr 05 Javascript

vue 使某个组件不被 keep-alive 缓存的方法

Sep 21 Javascript

element-ui多文件上传的实现示例

Apr 10 Javascript

全面分析JavaScript 继承

May 30 Javascript

使用JavaScript通过前端发送电子邮件

May 22 Javascript

taro 实现购物车逻辑的实例代码

Jun 05 Javascript

js获取url传值的方法

Dec 18 #Javascript

JavaScript setTimeout使用闭包功能实现定时打印数值

Dec 18 #Javascript

jquery获取css的color值返回RGB的方法

Dec 18 #Javascript

jQuery实现textarea自动增长宽高的方法

Dec 18 #Javascript

jquery简单倒计时实现方法

Dec 18 #Javascript

js命名空间写法示例

Dec 18 #Javascript

JavaScript Split()方法

Dec 18 #Javascript