省市联动初探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> ...
随机推荐
- shell常用代码
grep -lr 'hello' /usr/share/* #在/usr/share目录下查找包含hello的字符串 NOW_DATE=`date "+%Y%m%d%H%M%S"` ...
- android ArrayAdapter 如何动态更改数据
在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示,使用adpater与listview捆绑后,有时希望在程序使用过程中能动态的更改l ...
- 蓝牙BLE ATT剖析（二）-- PDU
一.Error Handling Error Response The Error Responseis used to state that a given request cannot be pe ...
- mysql case when用法
SELECT CASE WHEN `categoryid` =1THEN '参赛队员'ELSE '指导老师'END FROM `blog_article` WHERE 1
- Android源码剖析之Framework层实战版（Ams管理Activity启动）
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 讲到实战,就不得不拿两个例子来说明,本篇想拿的是应用最广泛的两个:Ams和Wms,一个管理activ ...
- 通过宏定义判断是否引入的是framework，反之则使用双引号,实用！
例: #if __has_include(<TestHead/TestHead.h>) #import <TestHead/TestHead.h>#else#import &q ...
- 正则表达式lastIndex属性浅析
有这样一段代码: var newDateStr = " 11 13:48:18"; var reg = new RegExp("[0-9]+","g& ...
- nodejs技术面试问题整理
1.meteor 是如何解决多回调的问题 参考 http://www.cnblogs.com/meteorcn/p/MeteorJS_Async_Fiber_Future_Wrap.html 2.一个 ...
- JSONModel 遇见关键字为id或者description
像id.description这样的,都是系统自带的,要解析它,得特殊处理一下.我用的是JSONModel { "contentList": [ { "id": ...
- Java学习-012-文件删除实例及源代码
此文源码主要为应用 Java 创建文件的源代码.若有不足之处,敬请大神指正,不胜感激! 文件删除源代码如下: /** * @function 文件操作:删除文件.若文件存在且未被占用,则删除文件:若文 ...