一、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. angular ng-bind

    <body ng-app=""> <div ng-controller="firstController"> <input typ ...

  2. 100_remove-duplicates-from-sorted-array

    /*@Copyright:LintCode@Author:   Monster__li@Problem:  http://www.lintcode.com/problem/remove-duplica ...

  3. React Starter Kit 中文文档

    最近没事又翻译了个玩意. Github上的一个Star 非常高的 React 样板程序. 由Node.js,Express,GraphQL和React构建,可选加入Redux等,并可以包含Webpac ...

  4. bootstrap table分页后刷新跳到第一页

    之前这样写是不行的,这时候页数还是原来的页数 $('#tb_departments').bootstrapTable(('refresh')); 需要改成: $("#tb_departmen ...

  5. 第三章 Docker的镜像

    3.1.获取镜像 获取镜像 docker pull name[:TAG] #默认是从网络下载镜像,不指定tag会人下载latest标签下的镜像. 1 2 docker search ubuntu do ...

  6. linux管道（|）与重定向（<>）的异同

    共同点:管道和重定向都改变程序的标准输入或者标准输出 区别: 管道(|)两边都是程序(命令),而重定向(<>)只有左边是程序(命令).即是,管道通过两个子进程来改变两边命令的输入或输出,重 ...

  7. python练习_12

    题目:敏感词文本文件 filtered_words.txt,里面的内容 和 0011题一样,当用户输入敏感词语,则用 星号 * 替换,例如当用户输入「北京是个好城市」,则变成「**是个好城市」.(11 ...

  8. bzoj1013 [JSOI2008]球形空间产生器

    Description 有一个球形空间产生器能够在n维空间中产生一个坚硬的球体.现在,你被困在了这个n维球体中,你只知道球面上n+1个点的坐标,你需要以最快的速度确定这个n维球体的球心坐标,以便于摧毁 ...

  9. Yii2框架---常用代码

    一.Php控制器跳转 return $this->redirect('/site/index/index');   二.回调自身控制器 self::actionXxxx();   三.获取当前用 ...

  10. #pragma mark指令的作用

    概述: 可以简单地给代码进行一个分组,方便代码的查找(可以不用记,无所谓的小东西) 例如: #pragma mark dog类的声明 @interface Dog :NSObject @end @im ...