省市联动初探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> ...
随机推荐
- Machine Learning in Action -- 回归
机器学习问题分为分类和回归问题 回归问题,就是预测连续型数值,而不像分类问题,是预测离散的类别 至于这类问题为何称为回归regression,应该就是约定俗成,你也解释不通 比如为何logistic ...
- [qemu] 挂载qcow2文件,qcow2里边还有个lvm
环境:archlinux 背景:在虚拟机里玩dpdk,把挂载HugePage(hugetlbfs)的命令写入fstab的时候,写错了,无法启动,需要把qcow2挂起来改一下. 方法:使用qemu-nb ...
- 在使用EFCodeFirst中出现类型“System.Data.Objects.ObjectContext”在未被引用的程序集中定义的解决方案
我安装了EF4.1版本,并在一个项目中映射一个数据库并生成了EF的MODEL实体层 测试:在Default.aspx页面上加了个GridView控件,后台进行绑定 using System; usin ...
- FW Docker为容器分配指定物理网段的静态IP
官方有关于网桥和IP配置的文档地址:https://docs.docker.com/articles/networking/ 1.宿主机(系统采用ubuntu-14.04.1-server-amd64 ...
- C# IO操作,写入文本到txt文件.
/// <summary> /// 写入日志文件 /// </summary> /// <param name="input"></par ...
- js 判断js函数、变量是否存在
//是否存在指定函数 function isExitsFunction(funcName) { try { if (typeof(eval(funcName)) == "function&q ...
- copy构造函数的秘密
1.先来看这段代码: MyString::MyString(){ this->mstr = NULL;} MyString::MyString(MyString &str){ //用一个 ...
- c#中如何将一个string数组转换为int数组
举个例子. string[] strArray = "a,b,c,d,e,f,g".Split(new char[]{ ',' }); int[] intArray; //C# 3 ...
- asp.net操作xml
下面是xml文档内容: <content width="368" height="450" bgcolor="cccccc" load ...
- 【转】Android Paint之 setXfermode PorterDuffXfermode 讲解
[置顶] Android Paint之 setXfermode PorterDuffXfermode 讲解 分类: android动效篇2015-04-07 17:23 978人阅读 评论(8) 收藏 ...