一、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. R语言写2048游戏

    2048 是一款益智游戏,只需要用方向键让两两相同的数字碰撞就会诞生一个翻倍的数字,初始数字由 2 或者 4 构成,直到游戏界面全部被填满,游戏结束. 编程时并未查看原作者代码,不喜勿喷. 程序结构如 ...

  2. ios系统判断某些适配 __IPHONE_OS_VERSION_MAX_ALLOWED

    由于app的最新设计字体是ios9之后的平方字体,但app最低支持ios7,so...想在常量配置文件类里统一适配下字体,如下: //适配字体,ios9及以上系统使用新字体--平方字体 #if __I ...

  3. Ubuntu搭建ssh连接（连接方式：桥接网卡、网络地址转换(NAT)）

    操作系统:Ubuntu Server 16.04.2 SSH软件:Putty(远程连接工具,视本机操作系统选择对应版本的putty) --------------------------------- ...

  4. 读书笔记之JavaScript中的数据类型(1)

    JavaScript严格意义上分为ECMAScript.DOM.BOM.ECMAScript是一门真正意义上的语言,独立于浏览器,浏览器只是它的一个宿主环境.DOM(文档对象模型),为ECMAScri ...

  5. 【原创】bootstrap框架的学习 第八课 -[bootstrap表单]

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 吹着表单或基本表单 向父 <form> 元素添加 role="form". 把标签 ...

  6. poj2502最短路！

    have just moved from a quiet Waterloo neighbourhood to a big, noisy city. Instead of getting to ride ...

  7. 再议Unity优化

    0x00 前言 在很长一段时间里,Unity项目的开发者的优化指南上基本都会有一条关于使用GetCompnent方法获取组件的条目(例如14年我的这篇博客<深入浅出聊Unity3D项目优化:从D ...

  8. SVN提交后自动推送消息到钉钉群

    钉钉设置机器人配置 1.进入配置机器人入口 2.添加机器人 3.测试WebHook请求 本人使用Postman进行测试 4.配置SVN 4.1 配置 Pre-commit hook 设置提交内容必须包 ...

  9. HDU4712 Hamming Distance (随机化)

    link:http://acm.hdu.edu.cn/showproblem.php?pid=4712 题意:给1e5个数字,输出这些数中,最小的海明码距离. 思路:距离的范围是0到20.而且每个数的 ...

  10. 在iOS应用程序中使用Frida绕过越狱检测

           阿里聚安全在之前的三篇博客中介绍了利用Frida攻击Android应用程序,整个过程仿佛让开发者开启上帝视角,在本篇博客中,我们将会介绍在iOS应用程序中使用Frida绕过越狱检测.即使 ...