省市联动初探AJAX操作数据
主要学习代码：
List.html
<script type="text/javascript">
function GetXhr() {
return new XMLHttpRequest();
} var getCities = function () {
//alert(this.options[this.selectedIndex].value);
//清空列表
var cities = document.getElementById("sltCity");
cities.options.length = 0; var id = this.options[this.selectedIndex].value;
var xhr = GetXhr();
xhr.open("post", "List.ashx", true);
//post方式添加
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//post方式永远不会使用浏览器的缓存
//设置不使用浏览器缓存
//xhr.setRequestHeader("If-Modified-Since", "0"); xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var json = eval(xhr.response);
for (var i = 0; i < json.length; i++) {
var node=document.createElement("option");
node.innerHTML=json[i].Name;
cities.appendChild(node);
}
}
};
xhr.send("pId=" + id);
};
function getProvinces() {
//创建异步请求对象
var xhr = GetXhr();
// alert(xhr.readyState);//0
//设置参数
xhr.open("get", "List.ashx", true); // alert(xhr.readyState);//1
xhr.onreadystatechange = function () {
// alert(xhr.readyState);//4
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// var s = [{ id: 1, name: 'value' }];
var cont = eval(xhr.responseText);
// alert(cont[0]);
//alert(cont.length);
var slt = document.getElementById("sltProvince");
for (var i = 0; i < cont.length; i++) {
slt.options[i] = new Option(cont[i].Name, cont[i].ID);
}
} else {
alert("服务器繁忙，请稍后在试。");
}
}
};
//alert(xhr.readyState);//1
//发送请求
xhr.send();//post方式填写参数
//alert(xhr.readyState);//1
};
window.onload = function () {
getProvinces();
document.getElementById("sltProvince").onchange = getCities;
};
</script>
</head>
<body>
省：
<select id="sltProvince">
</select>
市：<select id="sltCity">
</select>
</body>
List.ashx:
<%@ WebHandler Language="C#" Class="List" %> using System;
using System.Web;
using System.Collections.Generic;//List
//序列化命名空间
using System.Web.Script.Serialization; public class List : IHttpHandler
{ private Web.BLL.Transfer transfer = null;
private List<Web.Model.PC> lpc = null;
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
string id = context.Request.Form["pId"];
if (!string.IsNullOrEmpty(id))
{
//第二种方式
//市
transfer = new Web.BLL.Transfer();
JavaScriptSerializer serializer = new JavaScriptSerializer();
lpc = transfer.GetProvincesOrCities(int.Parse(id));
//这样返回的json自动以属性为键。
//[{"Name":"白城市","Id":94},
string json = serializer.Serialize(lpc);
context.Response.Write(json);
}
else
{
//第一种方式
//省
transfer = new Web.BLL.Transfer();
lpc = transfer.GetProvincesOrCities(0);
System.Text.StringBuilder sb = new System.Text.StringBuilder(500);
//拼接json字符串
sb.Append("[");
foreach (Web.Model.PC item in lpc)
{
sb.Append("{ID:" + item.Id + ",Name:'" + item.Name + "'},");
}
sb.Remove(sb.Length - 1, 1).Append("]");
context.Response.Write(sb.ToString());
}
}
Web.BAL
public class DataAction
{
private List<Web.Model.PC> lpc = null;
private Web.Model.PC pc = null;
public DataAction()
{
lpc = new List<Web.Model.PC>();
} public List<Web.Model.PC> GetProvincesOrCities(int pId)
{
string sql = "select * from TblArea where AreaPId={0}";
sql = string.Format(sql, pId);
System.Data.DataTable dt = SqlHelper.ExecuteDataTable(sql);
if (dt.Rows.Count > )
{
foreach (System.Data.DataRow item in dt.Rows)
{
pc = new Web.Model.PC(int.Parse(item[].ToString()), item[].ToString());
lpc.Add(pc);
}
}
return lpc;
}
}
项目文件：http://pan.baidu.com/s/1hq9Ro7E
省市联动初探AJAX操作数据的更多相关文章
- AJAX案例四：省市联动
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- Ajax省市联动
以JQuery为JS,写的Ajax省市联动. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- html + ashx 实现Ajax省市联动
基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...
- AJAX应用案例之省市联动
jsp 主要是要注意多Document的操作 <%-- Created by IntelliJ IDEA. User: YuWenHui Date: 2017/4/23 0023 Time: 1 ...
- ajax做省市联动
原理: 当select.jsp页面打开时,向服务器发送异步请求,得到所有省份的名称(文本数据).然后使用每个省份名称创建<option>,添加到<select name=”provi ...
- 练习: 省市联动(Ajax)
// 示例一: china.xml (位于 src 目录下) <?xml version="1.0" encoding="utf-8"?> < ...
- ajax经典案例--省市联动
ajax的省市联动案例 如果我们的代码比较复杂,可以通过file_put_contents来输出信息到某个日志. 在一个元素中添加另一个元素使用的方法是:appendChild(). 函数append ...
- JS 省市联动 ajax
省市联动 //省市联动 $('.locationCode').change(function () { var val = $(this).val(); if ...
- Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端
一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...
随机推荐
- ATT 汇编语法
在研华的pc104上使用看门狗要使用汇编.使用汇编来修改CMOS里面的参数.也就是内联汇编.linux下gcc只支持ATT汇编.所以这儿有必要将ATT语法学习学习.以后需要的时候翻出来温习温习. ...
- 初入C的世界
大家好,我叫吉贯之,来自贵州省遵义市,现就读于北京工业大学耿丹学院信息技术系计算机与科学专业,我的学号是160809127,我喜欢运动和一些电脑方面的软件操作. 应老师要求在博客园建立的博客,地址是h ...
- 【翻译】How To Tango With Django 1.5.4 第一章
1.概览 这本书的目的就是为了给你提供Django实战开发的指导,这本书主要是为学生设计的,它提供了开发并运行第一个web应用程序的详细的指导步骤,并且指导你怎么将它发布到web服务器上. 本书就是为 ...
- c 生成随机不重复的整数序列
#include <stdio.h> #include <malloc.h> #include <stdlib.h> #include <time.h> ...
- Nodejs电影建站开发实例(下)
作为一个真正的网站,不能没有数据的支持,下面使用的数据库为mongodb,电影可能有的数据:电影名称.导演.国家.语言.上映时间.图片.简介.视频 4.使用路由 app.js var express ...
- oracle中截取某个字符前面和后面的值
创建测试表及数据 create table test(name varchar2(10)); insert into test values ('2-15');insert into test val ...
- 常用jQuery代码01
1.点击获得当前元素索引,实现切换相应的图片路径 $(".li").bind("click", function () { var _num = $(this) ...
- 不允许修改SQLserver2008r2表中字段的属性问题
SQLserver2008r2修改表中字段的属性时弹出 点击工具->选项,取消阻止保存要求重新创建表的更改
- I.MX6 WIFI wireless_tools 移植
/******************************************************************************** * I.MX6 WIFI wirel ...
- CXF入门例子
1. WebService实现类:@WebService注解表示这个类发布为一个WebService服务. package com.coshaho.learn.cxf; import javax.jw ...