一、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. 使用 Gradle 编译 Java 项目时报错: Could not find Tools.jar

    在使用Android studio进行编译成jar的时候,遇到Gradle 编译错误,听前辈们说是jdk的版本不对,于是乎就更新了一下jdk, 然而可能是我重新安装jdk的时候改变了安装路径, 在pr ...

  2. STM8驱动HX711

    普及:HX711AD一款专为高精度电子秤而设计的 24 位 A/D 转换器芯片:                 获取数据方法:两个普通IO      DOUT输入:GPIO_Mode_In_FL_N ...

  3. CSS浮动专题!

    在css中,浮动问题可能是很多刚入门的小白比较头疼的问题. 1,首先先来介绍一下两种浮动类型:左浮动和右浮动 1) float:left;左浮动,后面的内容会流向对象的右侧 2) float:righ ...

  4. 简单的后台数据和前台数据交互.net

    最近忙着做POS项目,心血来来潮写了点小项目. 更具要求是随机显示数据并且产生的数据是可以控制的.前台交互显示能够倒叙,切每次只显示一条,页面不能超过20条超过的部分做删除. 我先展示一下前台的代码, ...

  5. PMD教程

    1.单词 violations outline:错误大纲2.错误级别 红色 很高的错误 橙色 错误 黄色 很高的警告 绿色 警告 蓝色 输出信息3.提示 Avoid excessively long ...

  6. Laravel 5.2 教程 - 邮件

    一.简介 Laravel 的邮件功能基于热门的 SwiftMailer 函数库之上,提供了一个简洁的 API.Laravel为SMTP.Mailgun.Mandrill.Amazon SES.PHP的 ...

  7. JQuery使用mousedown和mouseup简单判断鼠标按下与释放位置是否相同

    在JQuery中,我们可以利用mousedown.mouseup来跟踪页面的鼠标按下与释放事件. 如何获取鼠标的位置信息呢?事件event的pageX和pageY属性可以让我们获得鼠标在页面中的具体位 ...

  8. 详细解剖大型H5单页面应用的核心技术点

    项目 Xut.js 阐述下开发中一个比较核心的优化技术点,这是一套平台代码,并非某一个插件功能或者框架可以直接拿来使用,核心代码大概是6万行左右(不包含任何插件) .这也并非一个开源项目,不能商业使用 ...

  9. Python进阶之装饰器

    函数也是对象 要理解Python装饰器,首先要明白在Python中,函数也是一种对象,因此可以把定义函数时的函数名看作是函数对象的一个引用.既然是引用,因此可以将函数赋值给一个变量,也可以把函数作为一 ...

  10. MyEclipse2016统一字符编码

    MyEclipse一般没做修改,默认的字符编码是GBK,但是在实际的开发中常用的是utf-8,为了避免出现乱码等情况,我们需要把开发工具的编码都统一设置成utf-8,修改步骤如下: 1.打开MyEcl ...