當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript调用Web Services实现无刷新三联动
生活随笔
收集整理的這篇文章主要介紹了
JavaScript调用Web Services实现无刷新三联动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
http://singlepine.cnblogs.com/articles/301009.html
?
使用微軟提供的webservice.htc實現通過JavaScript調用WebService.
1.首先從微軟網站上下載webservice.htc,我附件源代碼也包含,不下載也可以
http://msdn.microsoft.com/workshop/author/webservice/webservice.htc
2.在網頁BODY中添加一個DIV,實現對webservice.htc的引用
3.編寫JavaScript,實現對WebService的引用:
function?window_onload()?
????????????{
????????????????service.useService("/Service1.asmx?WSDL","myselect");
????????????????str_province=service.myselect.callService(province_Result,"getProvince");
????????????}useService 語法:
sElementID.useService(sWebServiceURL, sFriendlyName [, oUseOptions])
useService 參數:
| sElementID | Required. The of the element to which the behavior is attached. | ||||||||
| sWebServiceURL | Required. String specifying the URL of the Web Service, using one of the following path types. See the examples section, where several variations of this parameter are shown.
| ||||||||
| sFriendlyName | Required. String representing a friendly name for the Web Service URL. | ||||||||
| oUseOptions | Optional. An instance of the object. |
callService語法:
iCallID = sElementID.sFriendlyName.callService( [oCallHandler], fo, oParam)
callService參數:
| sElementID | Required. The of the element to which the behavior is attached. | ||||
| sFriendlyName | Required. The friendly name for the Web Service, which is defined by calling the method. | ||||
| oCallHandler | Optional. Name of a script callback function that handles the results returned from this instance of the method call. | ||||
| fo | Required. One of the following possible values.
| ||||
| oParam | Required. One or more comma-delimited parameters, which are passed to the method name specified by fo. |
4.建立WebService,代碼如下
public?class?Service1?:?System.Web.Services.WebService
????{
????????public?static?string?ConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
????????SqlConnection?conn=new?SqlConnection(ConnectionString);
????????public?Service1()
????????{
????????????//CODEGEN:?This?call?is?required?by?the?ASP.NET?Web?Services?Designer
????????????InitializeComponent();
????????}
????????Component?Designer?generated?code#region?Component?Designer?generated?code
????????
????????//Required?by?the?Web?Services?Designer?
????????private?IContainer?components?=?null;
????????????????
????????/**////?<summary>
????????///?Required?method?for?Designer?support?-?do?not?modify
????????///?the?contents?of?this?method?with?the?code?editor.
????????///?</summary>
????????private?void?InitializeComponent()
????????{
????????}
????????/**////?<summary>
????????///?Clean?up?any?resources?being?used.
????????///?</summary>
????????protected?override?void?Dispose(?bool?disposing?)
????????{
????????????if(disposing?&&?components?!=?null)
????????????{
????????????????components.Dispose();
????????????}
????????????base.Dispose(disposing);????????
????????}
????????
????????#endregion
????????
????????getProvince#region?getProvince
????????[WebMethod(true)]
????????public?string?getProvince()
????????{
????????????string?sql="select?*?from?province";
????????????SqlCommand?cmd=new?SqlCommand(sql,conn);?
????????????cmd.Connection.Open();
????????????SqlDataReader?dr=cmd.ExecuteReader();
????????????string?s="";
????????????while(dr.Read())
????????????{
????????????????s?+=?","?+?dr["provinceID"].ToString()?+?"|"?+?dr["province"].ToString();
????????????}
????????????return?s;
????????}
????????#endregion
????????getCity#region?getCity
????????[WebMethod(true)]
????????public?string?getCity(string?provinceid)
????????{
????????????string?str="select?*?from?city?where?father?=?'"+provinceid+"'";
????????????SqlCommand?cmd=new?SqlCommand(str,conn);?
????????????cmd.Connection.Open();
????????????SqlDataReader?dr=cmd.ExecuteReader();
????????????string?s="";
????????????while(dr.Read())
????????????{
????????????????s?+=?","?+?dr["cityID"].ToString()?+?"|"?+?dr["city"].ToString();
????????????}
????????????return?s;
????????}
????????#endregion
????????getArea#region?getArea
????????[WebMethod(true)]
????????public?string?getArea(string?cityid)
????????{
????????????string?str="select?*?from?area?where?father='"+cityid+"'";
????????????SqlCommand?cmd=new?SqlCommand(str,conn);?
????????????cmd.Connection.Open();
????????????SqlDataReader?dr=cmd.ExecuteReader();
????????????string?s="";
????????????while(dr.Read())
????????????{
????????????????s?+=?","?+?dr["areaID"].ToString()?+?"|"?+?dr["area"].ToString();
????????????}
????????????return?s;
????????}
????????#endregion
????}5.建立測試頁面
<HTML>
????<HEAD>
????????<title>jsWebServices</title>
????????<meta?name="GENERATOR"?Content="Microsoft?Visual?Studio?.NET?7.1">
????????<meta?name="CODE_LANGUAGE"?Content="C#">
????????<meta?name="vs_defaultClientScript"?content="JavaScript">
????????<meta?name="vs_targetSchema"?content="http://schemas.microsoft.com/intellisense/ie5">
????????<script?language="javascript">
????????<!--????????????
????????????var?str_province;
????????????var?str_city;
????????????var?str_area;
????????????function?window_onload()?
????????????{
????????????????service.useService("/Service1.asmx?WSDL","myselect");
????????????????str_province=service.myselect.callService(province_Result,"getProvince");
????????????}
????????????function?province_Result(result)
????????????{????????????????
????????????????if(!result.error)
????????????{ ????????????????
????????????document.all("select_province").length=0; ????????????
????????????if(result.value.substring(0,1)==",")
????????????????????????result.value?=result.value.substring(1,result.length);
????????????var?piArray?=?result.value.split(',');
????????????for(var?i=0;i<piArray.length;i++)
????????????{
????????????var?ary1?=?piArray[i].toString().split('|');
????????????document.all("select_province").options.add(new?Option(ary1[1].toString(),ary1[0].toString()));
????????????} ????????????
????????????}
????????????}
????????????function?province_onchange()?
????????????{
????????????????var?province=document.getElementById("select_province");
????????????????var?pindex?=?province.selectedIndex;
????????????????var?pValue?=?province.options[pindex].value;
????????????????var?pText??=?province.options[pindex].text;
????????????????str_city=service.myselect.callService(city_Result,"getCity",pValue);
????????????}
????????????function?city_onchange()?
????????????{
????????????????var?city=document.getElementById("select_city");
????????????????var?cindex?=?city.selectedIndex;
????????????????var?cValue?=?city.options[cindex].value;
????????????????var?cText??=?city.options[cindex].text;
????????????????str_area=service.myselect.callService(area_Result,"getArea",cValue);
????????????}
????????????function?city_Result(result)
????????????{
????????????????if(!result.error)
????????????{
????????????document.all("select_city").length=0;
????????????if(result.value.substring(0,1)==",")
????????????????????????result.value?=result.value.substring(1,result.length);
????????????var?piArray?=?result.value.split(",");
????????????for(var?i=0;i<piArray.length;i++)
????????????{
????????????var?ary1?=?piArray[i].toString().split("|");
????????????document.all("select_city").options.add(new?Option(ary1[1].toString(),ary1[0].toString()));
????????????}
????????????}
????????????}
????????????function?area_Result(result)
????????????{
????????????????if(!result.error)
????????????{
????????????document.all("select_area").length=0;
????????????if(result.value.substring(0,1)==",")
????????????????????????result.value?=result.value.substring(1,result.length);
????????????var?piArray?=?result.value.split(",");
????????????for(var?i=0;i<piArray.length;i++)
????????????{
????????????var?ary1?=?piArray[i].toString().split("|");
????????????document.all("select_area").options.add(new?Option(ary1[1].toString(),ary1[0].toString()));
????????????}
????????????}
????????????}
????????????//-->
????????</script>
????</HEAD>
????<body?MS_POSITIONING="GridLayout"?onload="return?window_onload()">
????????<div?id="service"?style="BEHAVIOR:url(webservice.htc)"></div>
????????<form?id="Form1"?method="post"?runat="server">
????????????<SELECT?id="select_province"?onchange="province_onchange();"?style="Z-INDEX:?101;?LEFT:?8px;?WIDTH:?128px;?POSITION:?absolute;?TOP:?16px">
????????????????<OPTION?selected></OPTION>
????????????</SELECT><SELECT?id="select_city"?onchange="city_onchange();"?style="Z-INDEX:?102;?LEFT:?160px;?WIDTH:?128px;?POSITION:?absolute;?TOP:?16px">
????????????????<OPTION?selected></OPTION>
????????????</SELECT><SELECT?id="select_area"?style="Z-INDEX:?103;?LEFT:?304px;?WIDTH:?128px;?POSITION:?absolute;?TOP:?16px">
????????????????<OPTION?selected></OPTION>
????????????</SELECT>
????????</form>
????</body>
</HTML>6.引用webservicers
7.數據庫腳本
if?exists?(select?*?from?dbo.sysobjects?where?id?=?object_id(N'[dbo].[area]')?and?OBJECTPROPERTY(id,?N'IsUserTable')?=?1)
drop?table?[dbo].[area]
GO
if?exists?(select?*?from?dbo.sysobjects?where?id?=?object_id(N'[dbo].[province]')?and?OBJECTPROPERTY(id,?N'IsUserTable')?=?1)
drop?table?[dbo].[province]
GO
if?exists?(select?*?from?dbo.sysobjects?where?id?=?object_id(N'[dbo].[city]')?and?OBJECTPROPERTY(id,?N'IsUserTable')?=?1)
drop?table?[dbo].[city]
GO
CREATE?TABLE?[dbo].[area]?(
????[id]?[int]?NOT?NULL?,
????[areaID]?[nvarchar]?(50)?COLLATE?Chinese_PRC_CI_AS?NULL?,
????[area]?[nvarchar]?(60)?COLLATE?Chinese_PRC_CI_AS?NULL?,
????[father]?[nvarchar]?(6)?COLLATE?Chinese_PRC_CI_AS?NULL?
)?ON?[PRIMARY]
GO
CREATE?TABLE?[dbo].[province]?(
????[id]?[int]?NOT?NULL?,
????[provinceID]?[nvarchar]?(6)?COLLATE?Chinese_PRC_CI_AS?NULL?,
????[province]?[nvarchar]?(40)?COLLATE?Chinese_PRC_CI_AS?NULL?
)?ON?[PRIMARY]
GO
CREATE?TABLE?[dbo].[city]?(
????[id]?[int]?NOT?NULL?,
????[cityID]?[nvarchar]?(6)?COLLATE?Chinese_PRC_CI_AS?NULL?,
????[city]?[nvarchar]?(50)?COLLATE?Chinese_PRC_CI_AS?NULL?,
????[father]?[nvarchar]?(6)?COLLATE?Chinese_PRC_CI_AS?NULL?
)?ON?[PRIMARY]
GO8.下載真實數據/Files/singlepine/area.rar
9.源代碼下載/Files/singlepine/jsWebServices.rar
?
轉載于:https://www.cnblogs.com/291099657/archive/2009/04/09/1432493.html
總結
以上是生活随笔為你收集整理的JavaScript调用Web Services实现无刷新三联动的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: asp.net日历控件My97DateP
- 下一篇: SATA盘与SAS盘的区别