手机
当前位置:查字典教程网 >编程开发 >AJAX相关 >AJAX和WebService实现省市县三级联动具体代码
AJAX和WebService实现省市县三级联动具体代码
摘要:-------------------------------------WebService1.asmx-----------------...

-------------------------------------WebService1.asmx---------------------------------------

复制代码 代码如下:

// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。

[System.Web.Script.Services.ScriptService]

public class WebService1 : System.Web.Services.WebService

{

[WebMethod]

public string HelloWorld()

{

return "Hello World";

}

[WebMethod]

public List<Model.province> GetProvince()

{

BLL.province bpro = new BLL.province();

List<Model.province> list = bpro.GetListModel();

return list;

}

[WebMethod]

public List<Model.city> GetCityByPro(string proid)

{

BLL.city bcity = new BLL.city();

List<Model.city> list = bcity.GetListModel("father='" + proid + "'");

return list;

}

[WebMethod]

public List<Model.area> GetAreaByCity(string cityid)

{

BLL.area barea = new BLL.area();

List<Model.area> list = barea.GetListModel("father='" + cityid + "'");

return list;

}

----------------------------------HTMLPage1.htm----------------------------

复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<style type="text/css">

select

{

width: 150px;

}

</style>

<script src="js/Jquery1.7.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$.ajax({

type: "post",

contentType: "application/json",

url: "WebService1.asmx/GetProvince",

data: "{}",

success: function (result) {

var stroption = '';

for (var i = 0; i < result.d.length; i++) {

stroption += '<option value=' + result.d[i].provinceID + '>';

stroption += result.d[i].provincename;

stroption += '</option>';

}

$('#seprovince').append(stroption);

}

})

$('#seprovince').change(function () {

$('#secity option:gt(0)').remove();

$('#searea option:gt(0)').remove();

$.ajax({

type: "post",

contentType: "application/json",

url: "WebService1.asmx/GetCityByPro",

data: "{proid:'" + $(this).val() + "'}",

success: function (result) {

var strocity = '';

for (var i = 0; i < result.d.length; i++) {

strocity += '<option value=' + result.d[i].cityID + '>';

strocity += result.d[i].cityname;

strocity += '</option>';

}

$('#secity').append(strocity);

}

})

})

$('#secity').change(function () {

$('#searea option:gt(0)').remove();

$.ajax({

type: "post",

contentType: "application/json",

url: "WebService1.asmx/GetAreaByCity",

data: "{cityid:'" + $(this).val() + "'}",

success: function (result) {

var stroarea = '';

for (var i = 0; i < result.d.length; i++) {

stroarea += '<option value=' + result.d[i].areaID + '>';

stroarea += result.d[i].areaname;

stroarea += '</option>';

}

$('#searea').append(stroarea);

}

})

})

})

</script>

</head>

<body>

<table>

<tr>

<td>

地址

</td>

<td>

<select id="seprovince">

<option>--请选择--</option>

</select>

<select id="secity">

<option>--请选择--</option>

</select>市

<select id="searea">

<option>--请选择--</option>

</select>县

</td>

</tr>

</table>

</body>

</html>

AJAX和WebService实现省市县三级联动具体代码1

注:用到了三层架构,dal层写了一些方法

【AJAX和WebService实现省市县三级联动具体代码】相关文章:

JavaScript如何控制Session实现原理及代码

AJAX和WebService实现邮箱验证(无刷新验证邮件地址是否合法)

基于AJAX的分页类实现代码

AJAX实现简单的注册页面异步请求实例代码

AJAX解析XML实例之下拉框省、市二级联动

Ajax实现无闪烁定时刷新页面实例代码

AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页

php AJAX POST的使用实例代码

AJAX和三层架构实现分页功能具体思路及代码

Ajax的内部实现机制、原理与实践小结

精品推荐
分类导航