一、Ajax完整结构

$.ajax({

url:"Main.ashx",

data:{},

dataType:"json",

type:"post",

async:false,              //异步功能，默认是true，改为false就把异步关闭了

success:function(msg){

},

error:function(){                     //服务端路径错误，服务端出错，服务端没有返回规定的json格式数据都会走error

},

beforeSend:function(){             //在发送之前执行这里的内容，可以限制用户重复提交请求。

$("#btn1").attr("disabled","disabled");

$("btn1").val("加载中...");

},

complete:function(){                //在ajax返回数据后回调，不管返回的数据是否正确都会回调

$("#btn1").removeAttr("disabled");

$("btn1").val("加载数据");

}

});

二、三级联动的制作

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <script src="js/jquery-1.7.1.min.js"></script>

     <style type="text/css">

         .states {

         width:100px;

         height:30px;

         }

     </style>

 </head>

 <body>

     <select class="states" id="province"></select>

     <select class="states" id="city"></select>

     <select class="states" id="county"></select>

 </body>

 </html>

 <script type="text/javascript">

     statesload("");

     //加载数据的方法：

     function statesload(a) {

         if (a == "")

         {

             //加载省

             $.ajax({

                 url: "Area.ashx",

                 data: { "pcode": "" },

                 type: "post",

                 dataType: "json",

                 success: function (msg) {

                     //先把<select></select>中的选项清空

                     $("#province").empty();

                     for (var i in msg)

                     {

                         var str="<option value='"+msg[i].areacode+"' >"+msg[i].areaname+"</option>"

                         $("#province").append(str);

                     }

                     //在加载完省以后再加载市

                     statesload("");

                 },

                 beforeSend: function () {

                     $("#province").append("<option value='null'>加载中...</option>");

                 },

                 complete: function () {

                 }

             });

         }

         if (a == "")

         {

             //加载市

             $.ajax({

                 url: "Area.ashx",

                 data: { "pcode": $("#province").val() },

                 type: "post",

                 dataType: "json",

                 success: function (msg) {

                     $("#city").empty();

                     for (var i in msg) {

                         var str = "<option value=\"" + msg[i].areacode + "\" >" + msg[i].areaname + "</option>"

                         $("#city").append(str);

                     }

                     //加载完市以后再加载区县

                     statesload("");

                 },

                 beforeSend: function () {

                     $("#city").empty();

                     $("#city").append("<option value='null'>加载中...</option>");

                 },

                 complete: function () {

                 }

             });

         }

         if (a == "")

         {

             //加载区县

             $.ajax({

                 url: "Area.ashx",

                 data: { "pcode": $("#city").val() },

                 type: "post",

                 dataType: "json",

                 success: function (msg) {

                     $("#county").empty();

                     for (var i in msg) {

                         var str = "<option value=\"" + msg[i].areacode + "\" >" + msg[i].areaname + "</option>"

                         $("#county").append(str);

                     }

                 },

                 beforeSend: function () {

                     $("#county").empty();

                     $("#county").append("<option value='null'>加载中...</option>");

                 }

             });

         }

     }

     $("#province").change(function () {

         statesload("");

     });

     $("#city").change(function () {

         statesload("");

     });

 </script>

三级联动界面和Jquery

<%@ WebHandler Language="C#" Class="Area" %>

using System;

using System.Web;

using System.Collections.Generic;

using System.Linq;

using System.Text;

public class Area : IHttpHandler

{

    public void ProcessRequest(HttpContext context)

    {

        //先睡上2秒再执行，模拟一下网速卡。

        System.Threading.Thread.Sleep();

        string id = context.Request["pcode"];

        StringBuilder str = new StringBuilder();

        int count=;

        str.Append("[");

        using (Data0216DataClassesDataContext con = new Data0216DataClassesDataContext())

        {

            List<ChinaStates> clist = con.ChinaStates.Where(r => r.ParentAreaCode == id).ToList();

            foreach (ChinaStates c in clist)

            {

                if (count > ) str.Append(",");

                str.Append("{\"areaname\":\"" + c.AreaName + "\",\"areacode\":\"" + c.AreaCode + "\"}");

                count++;

            }

        }

        str.Append("]");

        context.Response.Write(str);

        context.Response.End();

    }

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

}

一般处理程序

【2017-06-06】Ajax完整结构、三级联动的制作的更多相关文章

  1. Ajax完整结构和删除

    1.ajax完整结构 注意:(1)最后一个没有"," (2)ajax对网速要求高,最好有各种提示和使用按钮(可使其失效,防止重复加载) $.ajax({ url: "aj ...

  2. 第117天：Ajax实现省市区三级联动

    Ajax实现省市区三级联动 思路: (1)首先获取省份信息 (2)发起Ajax请求,注意dataType中的T大写 (3)封装回调函数,回调函数success中用$.each循环每一条数据,动态创建o ...

  3. Ajax 案例之三级联动

    每次在博客园网站写博客,格式真的好难搞,还望好心人告知更好的编辑工具.接下来进入正题:三级联动(其效果演示可看我的博文Ajax 学习总结 末尾). 数据表设计(Oracle) 新建数据表 Employ ...

  4. ajax完整结构

    $.ajax({ url:"服务器", data:{"key":所传数据}, type:"post", dataType:"jso ...

  5. Ajax案例：三级联动查询员工的信息(三张表进行内连接)

    需求分析: 通过数据库连接池,可以查询到数据库中员工的各种信息,通过点击下拉框的方式实现三级联动,即:没有点击city下拉框,后面两个下拉框中没有值,这样,点击city下拉框,department下拉 ...

  6. 基于ThinkPHP+AJAX的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

  7. 基于thinkphp和ajax的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

  8. AJAX省市县三级联动的实现

    省市县数据 本例子中省市县数据保存在MySQL数据库中,部分数据截图如下: 从数据库中读取数据 导入需要的jar包 连接池配置文件 <c3p0-config> <!-- 默认配置,如 ...

  9. jquery+php+mysql实现Ajax省市县三级联动

    1.第一步建立一个html页面的,放置省.市.县三个select选择框,代码如下: <!DOCTYPE html> <html> <head> <title& ...

随机推荐

  1. iOS获取设备型号和App版本号等信息（OC＋Swift）

    iOS获取设备型号和App版本号等信息(OC+Swift) 字数1687 阅读382 评论3 喜欢10 好久没有写过博客了,因为中间工作比较忙,然后有些个人事情所以耽误了.但是之前写的博客还一直有人来 ...

  2. LINUX下安装搭建nodejs及创建nodejs-express-mongoose项目

    在Ubuntu中按CTRL+ALT+T打开命令窗口,按下面步骤和命令进行安装即可.添加sublime text 3的仓库.1.sudo add-apt-repository ppa:webupd8te ...

  3. 这可能是php世界中最好的日志库——monolog

    由于一些历史原因,php中并没有内建的日志接口,故长期以来也没一个功能完备并且应用广泛的日志库.在我的工作生涯中,如果系统需要记录一些应用日志的话,基本上就是封装一个日志类,然后把一些要记录的字段写入 ...

  4. 根据GPS经纬度判断当前所属的市区

    这个事情分两步走 1. 拿到行政区划的地理围栏数据 2. 根据GPS定位判断一个点是否落在地理围栏的多边形区域里. 1. 获取行政区划的地理围栏数据可以利用百度API.打开以前我的一个例子在chrom ...

  5. Arraylist动态扩容详解

    ArrayList 概述 ArrayList是基于数组实现的,是一个动态数组,其容量能自动增长. ArrayList不是线程安全的,只能用在单线程环境下. 实现了Serializable接口,因此它支 ...

  6. Vmware Vsphere WebService之vijava 开发（二）一性能信息的采集（实时监控）

    最近一直没有更新这部分的内容,会利用五一时间完成vcenter这一个系列. 这里先给大家一本关于vijava开发的书,比较实用. 地址:http://pan.baidu.com/s/1gfkl9mj. ...

  7. 经验分享：如何用grep对PHP进行代码审计

    这是一个常见的误解- 企业需要购买复杂和昂贵的软件来发现应用程序中安全漏洞:而这些专门的软件应用程序,无论是黑盒或白盒,开源或商业,都能很快的发现安全漏洞. 事实是:所有这些专业的漏洞扫描工具都有其特 ...

  8. lightoj1336数论基础

    #include<iostream> #include<cstdio> #include<cmath> #define ll long long using nam ...

  9. C# Winform中的窗体传值

    关于C#winform窗体之间的传值有以下几种做法 1 通过构造函数传值 2 属性传值 以上两种方法不早详细介绍. 3 通过事件传值,委托传值 首先看一下通过委托传值吧. 1,创建两个窗体,分别是Fo ...

  10. Oracle12c多租户管理用户、角色、权限

    Oracle 数据库 12 c 多租户选项允许单个容器数据库 (CDB) 来承载多个单独的可插拔数据库 (PDB).那么我们如何在容器数据库 (CDB) 和可插拔数据库 (PDB)管理用户权限.背景: ...