jQuery AJAX 調(diào)用WebService實現(xiàn)代碼
更新時間:2010年03月24日 16:53:19 作者:
用jQuery調(diào)用其他項目的WebService的代碼,需要的朋友可以參考下。
用jQuery調(diào)用其他項目的WebService
實現(xiàn)登錄驗證功能
html輸入用戶名密碼:
代碼
<table style="width: 400px">
<tr>
<td style="width: 200px" class="left">
Login ID:
</td>
<td style="width: 200px" class="left">
<input id="txtLoginID" type="text" style="width: 190px;" value="" />
</td>
</tr>
<tr>
<td style="width: 200px" class="left">
Login Password:
</td>
<td style="width: 200px" class="left">
<input id="txtLoginPW" type="password" style="width: 190px;" value="" />
</td>
</tr>
<tr>
<td style="width: 200px" class="center">
<input id="btnSignin" value="Sign in" class="button" readonly />
</td>
<td style="width: 200px" class="center">
<input id="btnSignup" value="Sign up" class="button" readonly />
</td>
</tr>
</table>
Jquery引用和登錄事件
代碼
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('#btnSignin').click
(function()
{
$.ajax
(
{
type: "POST",
contentType: "application/json",
url: serviceURL+"/UserLogin",
data: "{UserLoginID:'"+$('#txtLoginID').val()+"',UserLoginPW:'"+$('#txtLoginPW').val()+"'}",
dataType: 'json',
success: function(result)
{
var user = eval(result.d);
location.href = "Welcome.aspx?userID="+user.UserID
},
error: function(result, status)
{
if(status == 'timeout')
{
alert("The request timed out, please resubmit");
}
else
{
if(result.responseText !="")
{
eval("exception = "+result.responseText);
alert(exception.Message);
}
}
}
}
);
}
);
});
$(document).ready(function()
{
$('#btnSignup').click
(function()
{
location.href = "Signup/Signup.aspx";
})
});
</script>
serviceURL類似:var serviceURL = "http://localhost:1742/SoldierServices.asmx";
WebService代碼:
代碼
/// <summary>
/// Summary description for SoldierServices
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class SoldierServices : System.Web.Services.WebService
{
[WebMethod]
public User UserLogin(string UserLoginID, string UserLoginPW)
{
LoginBusiness lb = new LoginBusiness();
return lb.UserLogin(UserLoginID, UserLoginPW);
}
[WebMethod]
public User GetUserInfo(string UserID)
{
LoginBusiness lb = new LoginBusiness();
return lb.GetUserInfo(UserID);
}
}
注意:[System.Web.Script.Services.ScriptService]默認(rèn)是注釋的,要把注釋去掉
實現(xiàn)登錄驗證功能
html輸入用戶名密碼:
代碼
復(fù)制代碼 代碼如下:
<table style="width: 400px">
<tr>
<td style="width: 200px" class="left">
Login ID:
</td>
<td style="width: 200px" class="left">
<input id="txtLoginID" type="text" style="width: 190px;" value="" />
</td>
</tr>
<tr>
<td style="width: 200px" class="left">
Login Password:
</td>
<td style="width: 200px" class="left">
<input id="txtLoginPW" type="password" style="width: 190px;" value="" />
</td>
</tr>
<tr>
<td style="width: 200px" class="center">
<input id="btnSignin" value="Sign in" class="button" readonly />
</td>
<td style="width: 200px" class="center">
<input id="btnSignup" value="Sign up" class="button" readonly />
</td>
</tr>
</table>
Jquery引用和登錄事件
代碼
復(fù)制代碼 代碼如下:
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('#btnSignin').click
(function()
{
$.ajax
(
{
type: "POST",
contentType: "application/json",
url: serviceURL+"/UserLogin",
data: "{UserLoginID:'"+$('#txtLoginID').val()+"',UserLoginPW:'"+$('#txtLoginPW').val()+"'}",
dataType: 'json',
success: function(result)
{
var user = eval(result.d);
location.href = "Welcome.aspx?userID="+user.UserID
},
error: function(result, status)
{
if(status == 'timeout')
{
alert("The request timed out, please resubmit");
}
else
{
if(result.responseText !="")
{
eval("exception = "+result.responseText);
alert(exception.Message);
}
}
}
}
);
}
);
});
$(document).ready(function()
{
$('#btnSignup').click
(function()
{
location.href = "Signup/Signup.aspx";
})
});
</script>
serviceURL類似:var serviceURL = "http://localhost:1742/SoldierServices.asmx";
WebService代碼:
代碼
復(fù)制代碼 代碼如下:
/// <summary>
/// Summary description for SoldierServices
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class SoldierServices : System.Web.Services.WebService
{
[WebMethod]
public User UserLogin(string UserLoginID, string UserLoginPW)
{
LoginBusiness lb = new LoginBusiness();
return lb.UserLogin(UserLoginID, UserLoginPW);
}
[WebMethod]
public User GetUserInfo(string UserID)
{
LoginBusiness lb = new LoginBusiness();
return lb.GetUserInfo(UserID);
}
}
注意:[System.Web.Script.Services.ScriptService]默認(rèn)是注釋的,要把注釋去掉
您可能感興趣的文章:
- Jquery + Ajax調(diào)用webService實例代碼(asp.net)
- 關(guān)于jquery ajax 調(diào)用帶參數(shù)的webservice返回XML數(shù)據(jù)一個小細(xì)節(jié)
- jQuery Ajax方法調(diào)用 Asp.Net WebService 的詳細(xì)實例代碼
- asp.net下使用jquery 的ajax+WebService+json 實現(xiàn)無刷新取后臺值的實現(xiàn)代碼
- Jquery ajax傳遞復(fù)雜參數(shù)給WebService的實現(xiàn)代碼
- Jquery Ajax學(xué)習(xí)實例6 向WebService發(fā)出請求,返回DataSet(XML) 異步調(diào)用
- Jquery Ajax學(xué)習(xí)實例3 向WebService發(fā)出請求,調(diào)用方法返回數(shù)據(jù)
- Jquery Ajax學(xué)習(xí)實例4 向WebService發(fā)出請求,返回實體對象的異步調(diào)用
- Jquery Ajax學(xué)習(xí)實例5 向WebService發(fā)出請求,返回泛型集合數(shù)據(jù)的異步調(diào)用
- jQuery ajax調(diào)用webservice注意事項
相關(guān)文章
webuploader模態(tài)框ueditor顯示問題解決方法
這篇文章主要為大家詳細(xì)介紹了webuploader模態(tài)框ueditor顯示問題的解決,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12使用jQuery實現(xiàn)的網(wǎng)頁版的個人簡歷(可換膚)
點擊姓名會顯示她的基本詳細(xì)信息,點擊切換皮膚,會更改皮膚和字體大小感興趣的朋友可以參考下本文如何使用jQuery實現(xiàn)的網(wǎng)頁版的個人簡歷2013-04-04jQuery validate插件實現(xiàn)ajax驗證重復(fù)的2種方法
這篇文章主要介紹了jQuery validate插件實現(xiàn)ajax驗證重復(fù)的2種方法,結(jié)合完整實例形式分析了jQuery validate插件的使用技巧,需要的朋友可以參考下2016-01-01基于jQuery和Bootstrap框架實現(xiàn)仿知乎前端動態(tài)列表效果
最近基于jQuery和Bootstrap框架實現(xiàn)了一個仿知乎動態(tài)列表的前端效果,基本實現(xiàn)了和知乎動態(tài)列表相同的效果,下面小編通過本文給大家分享實現(xiàn)思路及代碼,對bootstrap 實現(xiàn)仿知乎前端動態(tài)列表效果感興趣的朋友一起看看吧2016-11-11jQuery學(xué)習(xí)筆記之 Ajax操作篇(三) - 過程處理
對于 jQuery 通過 Ajax 方式傳遞數(shù)據(jù)時,我們還可以在過程中進行一定的處理,以便達(dá)到我們的需求。2014-06-06