一、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. 交作业啊，python爬取58的页面

    第一次写博文,好紧张啊,写这么烂怎么给别人看啊先做下总结: 刚开始学习python,自我感觉python写起来确实很方便,各种库,各种语法糖,不过刚接触,一下子记不下来这么多东西,总感觉乱乱的,用的多 ...

  2. Java设置Excel有效性

    XSSFWorkbook wb = new XSSFWorkbook(); XSSFSheet sheet = wb.createSheet("Excel"); String[] ...

  3. [bug] Cannot proceed because system tables used by Event Scheduler were found damaged at server start

    本地:mac 10.12.3  mysql 5.6 远程:linux 7.3    mysql 5.7.18.  (远程数据库yum安装,又5.6升级到5.7) 步骤:从本地数据库导出数据到远程数据库 ...

  4. PHP获取Post的原始数据方法小结(POST无变量名)

    From : http://blog.csdn.net/hotdigger/article/details/6456240   一般我们都用$_POST或$_REQUEST两个预定义变量来接收POST ...

  5. <JAVA>可变参数列表

    这是java1.5版本的新特性,就是当你想定义一个方法,但是不知道以后要用的时候传几个参数进去,这时可以在方法的参数列表中这样写(参数类型... 数组名),然后在方法内部直接用操作数组的方式操作.比如 ...

  6. 微信小程序框架

    框架 小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务. 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的 ...

  7. mysql,oracle,sqlserver使用jdbc连接数据库总结

    jdbc连接数据是javaweb开发的一个重点,今天特此来总结一下,加深记忆. jdbc连接数据库一共分为三步: 1:加载驱动 需要去下载各自的驱动jar包,可以去网上搜索一下. 模板:加载驱动程序: ...

  8. python基本语法-加密解密等

    1. 编写函数,要求输入x与y,返回x和y的平方差 2. 计算1到100的平方的和 3. 编写函数,若输入为小于100的数,返回TRUE,大于100的数,返回FALSE 4. 某个公司采用公用电话传递 ...

  9. ASP.NET MVC知识点总结

    一直都有把MVC的知识点总结出来的打算,今日终于得偿所愿.话不多说,开工!!! 一·  MVC MVC设计模式->MVC框架(前端开发框架),asp.net(webform) aspx M:Mo ...

  10. Vmware虚拟机中安装cnetOS7详细图解步骤

    1.安装VMware 下载一个软件安装: .新建一个虚拟机 .引用安装包 4.启动新建的虚拟机 .安装CentOS7的步骤 配置系统语言: 配置系统时间: 配置系统键盘: 配置键盘切换的快捷键: 配置 ...