AJAX和WebService实现省市县三级联动具体代码
程序员文章站
2022-08-09 21:14:55
-------------------------------------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>
注：用到了三层架构，dal层写了一些方法
复制代码 代码如下:
// 若要允许使用 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>
注：用到了三层架构，dal层写了一些方法
上一篇： Python机器学习之SVM支持向量机
下一篇： 辣椒拌香菜，想要吃得好你必须看一看