Ajax结构:

 var name = $("#text_1").val();
$.ajax({
url: "Ashxs/Handler.ashx",//一般处理程序路径
data: { "name": name },//要传输的数据,冒号前面是键名后面是要传输的数据,如果有多条数据在大括号内用逗号拼接
type: "post",//传输方式
dataType: "json",//返回数据类型
success: function (has) {//has是自定义的,必须有
if (has.hasname == "1") {//hasname是一般处理程序返回数据的键名
$("#span_1").text("用户名已存在!");
}
else {
$("#span_1").text("用户名可用!");
}
}
});
error要在success花括号后面加逗号使用,beforSend和complete同样也是一次在上一个的花括号下面加逗号使用
error:function(){
//服务器连接不上,或是返回内容有错误,就走这里
//通常可以使用这玩意排错
}
beforeSend:function(){
//ajax一执行,就立马执行这个方法
}
complete:function(){
//ajax里的success或是error执行完毕,立马执行这里
}

json基本结构:

"{\"hasname\":\"1\"}"
"[{"name":"zhangsan","pwd":""},{"name":"lisi","pwd":""}]"
//就是一个字符串,冒号前面是键名后面是数据,如果有多条数据用逗号拼接,然后用英文的中括号括起来

三级联动小练习

一般处理程序:

  DataClassesDataContext DC = new DataClassesDataContext();
public void ProcessRequest(HttpContext context)
{
int count = ;
string end = "[";
var list = DC.ChinaStates.Where(r => r.ParentAreaCode == context.Request["Pplace"]);
foreach (ChinaStates C in list)
{
if (count == )
{
end += "{\"place\":\"" + C.AreaName + "\",\"Pcode\":\"" + C.AreaCode + "\"}";
}
else
{
end += ",{\"place\":\"" + C.AreaName + "\",\"Pcode\":\"" + C.AreaCode + "\"}";
}
count++;
}
end += "]";
context.Response.Write(end);

html页面:

<select id="select_1"></select>
<select id="select_2"></select>
<select id="select_3"></select> <script>
$.ajax({
url: "Ashxs/Handler2.ashx",
data: { "Pplace": "0001" },
type: "post",
dataType: "json",
success: function (da) {
for (i in da) {
var OP = new Option(da[i].place, da[i].Pcode);
$("#select_1").get(0).add(OP);
}
place1();
}
});//显示全部省级数据
$("#select_1").change(function () { place1() });
$("#select_2").change(function () { place2() });
function place1() {
$("#select_2").empty();
$.ajax({
url: "Ashxs/Handler2.ashx",
data: { "Pplace": $("#select_1").val() },
type: "post",
dataType: "json",
success: function (da) {
for (i in da) {
$("#select_2").get(0).add(new Option(da[i].place, da[i].Pcode));
}
place2();
}
});
}//显示市级数据
function place2() {
$("#select_3").empty();
$.ajax({
url: "Ashxs/Handler2.ashx",
data: { "Pplace": $("#select_2").val() },
type: "post",
dataType: "json",
success: function (da) {
for (i in da) {
$("#select_3").get(0).add(new Option(da[i].place, da[i].Pcode));
}
}
});
}//显示县级数据
</script>

完整的Ajax及三级联动小练习的更多相关文章

  1. ajax 实现三级联动

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  2. ajax 实现三级联动下拉菜单

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  3. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  4. 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

    在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

  5. PHP ajax 实现三级联动

    在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用 JS代码: $(document).ready(function(e) { $("#sanji&qu ...

  6. 基于jQuery的AJAX实现三级联动菜单

    最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...

  7. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  8. Ajax实现三级联动(0520)

    查询数据库中的chinastates表,通过父级代号查询相应省市区. 实现界面: 在js页面实现三级联动 在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面) 用插件的形式,创建三个 ...

  9. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

随机推荐

  1. request获取url的方法总结

    辣么多属性.方法  不用就忘了  ,当需要用的时候挠头也想不到,现在总结一下 以备用 例如:http://localhost/testweb/default.aspx 1.Request.Applic ...

  2. oracle字符函数

    UPPER(char) 小写转大写 LOWER(char) 大写转小写 INITCAP(char) 首字母转换 SUBSTR(char,[m[,n]]) 截取字符串函数 从源字符串char的m开始截取 ...

  3. XML实体注入漏洞

    XML实体注入漏洞 测试代码1: 新建xmlget.php,复制下面代码 <?php $xml=$_GET['xml']; $data = simplexml_load_string($xml) ...

  4. hdu4690 EBCDIC ——水题,考耐心

    link:http://acm.hdu.edu.cn/showproblem.php?pid=4690 考的是耐心何细心啊,用map把两个表格映射一下就行~ #include <iostream ...

  5. ubuntu QWT Qt

    1,下载QWT 2,解压进入QWT的目录 3,qmake,生成makefile文件 4,编译,make 5,安装,make install ,需要root 安装好后会在 /usr/local 目录下有 ...

  6. Reveal UI 分析工具分析手机 App

    上篇文章介绍了: Reveal UI 分析工具简单使用 这里介绍如何使用 Reveal UI 分析工具来进行手机 App UI 界面的分析. 前提准备: (1)已安装 Reveal 的 Mac (2) ...

  7. 【Unity3D自学记录】判断物体是否在镜头内

    判断物体是否在镜头内. 其实很简单的方法 代码如下: using UnityEngine; using System.Collections; public class DJH_IsRendering ...

  8. knockout 第一个实例visible

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Unity2D多分辨率屏幕适配方案(转载)

    一下内容转自:http://imgtec.eetrend.com/forum/3992 此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有 ...

  10. 使用lipo 查看静态库命令

    lipo -info .a 的: find . -name *.a -exec lipo -info "{}" \; framework 的: find . -name *.fra ...