AJAX和WebService實現省市縣三級聯動具體代碼

來源：懂視網責編：小采時間：2020-11-27 22:52:25

AJAX和WebService實現省市縣三級聯動具體代碼

AJAX和WebService實現省市縣三級聯動具體代碼:-------------------------------------WebService1.asmx--------------------------------------- 代碼如下:// 若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消對下行的注釋。 [System.Web.Script.Services

推薦度：

點擊下載本文 文檔為doc格式

導讀AJAX和WebService實現省市縣三級聯動具體代碼:-------------------------------------WebService1.asmx--------------------------------------- 代碼如下:// 若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消對下行的注釋。 [System.Web.Script.Services

-------------------------------------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層寫了一些方法
 
 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

AJAX和WebService實現省市縣三級聯動具體代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：代碼代碼代碼 web

熱門焦點

AJAX和WebService實現省市縣三級聯動具體代碼

AJAX和WebService實現省市縣三級聯動具體代碼

AJAX和WebService實現省市縣三級聯動具體代碼

最新推薦

猜你喜歡

熱門推薦