亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

ASP.NET jQuery 食譜23 (jQuery AJAX實(shí)現(xiàn)調(diào)用頁(yè)

系統(tǒng) 2240 0

這節(jié)我們來(lái)看下如何實(shí)現(xiàn)AJAX調(diào)用頁(yè)面后臺(tái)方法和web服務(wù)定義的方法,下面通過(guò)驗(yàn)證用戶(hù)的例子,先講解如何調(diào)用頁(yè)面后臺(tái)方法,具體實(shí)現(xiàn)步驟如下:

1.新建Recipe23.aspx頁(yè)面。

2.在該頁(yè)面的后臺(tái)文件Recipe23.aspx.cs中添加引用

      
        using
      
       System.Web.Services;
    

3.定義靜態(tài)數(shù)組和初始化數(shù)據(jù)

      
        public
      
      
        static
      
      
        string
      
      [] userNameArrray;
      

protected void Page_Load( object sender, EventArgs e)
{
userNameArrray = new string [ 5 ] { " KenLee01 " , " KenLee02 " , " KenLee03 " , " KenLee04 " , " KenLee05 " };
}

4.定義驗(yàn)證用戶(hù)名合法性的靜態(tài)方法

      
        ///
      
      
        <summary>
      
      
        
/// 驗(yàn)證用戶(hù)是否合法
/// </summary>
/// <remarks>
/// AJAX如果要直接調(diào)用該方法,需要添加[WebMethod()],并定義為靜態(tài)方法
/// </remarks>
/// <param name="sUserName"> 用戶(hù)名 </param>
/// <returns> 返回結(jié)果 </returns>
[WebMethod()]
public static bool CheckUserName( string sUserName)
{
// 如果用戶(hù)存在,就驗(yàn)證合法
if (userNameArrray.Contains(sUserName))
{
return true ;
}

return false ;
}

5.在Recipe.aspx里面實(shí)現(xiàn)界面結(jié)構(gòu)代碼如下

      
        <
      
      
        form 
      
      
        id
      
      
        ="form1"
      
      
         runat
      
      
        ="server"
      
      
        >
      
      
< div >
< asp:TextBox ID ="txtUserName" runat ="server" ></ asp:TextBox >
< asp:Button ID ="btnCheck" runat ="server" Text ="驗(yàn)證用戶(hù)" />
</ div >
</ form >

6.在Recipe.aspx里面實(shí)現(xiàn)AJAX調(diào)用頁(yè)面后臺(tái)用戶(hù)驗(yàn)證方法CheckUserName的腳本代碼如下

      
        <
      
      
        script 
      
      
        type
      
      
        ="text/javascript"
      
      
        >
      
      
        
$(
function () {
$(
" #btnCheck " ).click( function (e) {
e.preventDefault();

// 首先判斷用戶(hù)名是否為空,并給出提示
if ($( " #txtUserName " ).val() == "" ) {
alert(
" 請(qǐng)輸入用戶(hù)名! " );
}
else {
sendData($(
" #txtUserName " ).val());
}
});

// 定義一個(gè)AJAX請(qǐng)求方法
function sendData(sUserName) {
// 訪問(wèn)頁(yè)面后臺(tái)方法
var loc = window.location.href;
$.ajax({
type:
" POST " ,
url: loc
+ " /CheckUserName " ,
// sUserName要跟請(qǐng)求方法CheckUserName定義的參數(shù)名稱(chēng)要保持一致
// json數(shù)據(jù)格式是由一對(duì)鍵值構(gòu)成,如{"name1":"value1", "name2":"value2"}
data: ' { "sUserName": " ' + sUserName + ' "} ' ,
// 發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類(lèi)型
contentType: " application/json; charset=utf-8 " ,
dataType:
" json " ,
success:
function (msg) {
// AJAX響應(yīng)被包裝到一個(gè)d對(duì)象里,如{"d":true},
// 因此需要用到msg.d來(lái)獲取請(qǐng)求返回的布爾值
if (msg.d) {
alert(
" 驗(yàn)證用戶(hù)成功! " );
}
else {
alert(
" 驗(yàn)證用戶(hù)失敗! " );
}
},
error:
function (xhr, textStatus, errorThrown) {
alert(
" AJAX錯(cuò)誤: " + errorThrown);
}
});
}
});
</ script >

7.運(yùn)行程序后顯示頁(yè)面如下:

8.輸入用戶(hù)名KenLee10:

ASP.NET jQuery 食譜23 (jQuery AJAX實(shí)現(xiàn)調(diào)用頁(yè)面后臺(tái)方法和web服務(wù)定義的方法)_第1張圖片

9.輸入用戶(hù)名KenLee01:

ASP.NET jQuery 食譜23 (jQuery AJAX實(shí)現(xiàn)調(diào)用頁(yè)面后臺(tái)方法和web服務(wù)定義的方法)_第2張圖片

10.還可以通過(guò)Firebug觀察AJAX請(qǐng)求響應(yīng)的數(shù)據(jù),請(qǐng)求數(shù)據(jù)如下:

ASP.NET jQuery 食譜23 (jQuery AJAX實(shí)現(xiàn)調(diào)用頁(yè)面后臺(tái)方法和web服務(wù)定義的方法)_第3張圖片

11.請(qǐng)求響應(yīng)的JSON數(shù)據(jù):

ASP.NET jQuery 食譜23 (jQuery AJAX實(shí)現(xiàn)調(diào)用頁(yè)面后臺(tái)方法和web服務(wù)定義的方法)_第4張圖片

ASP.NET jQuery 食譜23 (jQuery AJAX實(shí)現(xiàn)調(diào)用頁(yè)面后臺(tái)方法和web服務(wù)定義的方法)_第5張圖片


下面再來(lái)看下AJAX如何調(diào)用Web服務(wù):

1.創(chuàng)建Web服務(wù)用戶(hù)驗(yàn)證的文件UserNameWS.asmx,必須添加[System.Web.Script.Services.ScriptService],實(shí)現(xiàn)用戶(hù)驗(yàn)證代碼如下:

      
        using
      
       System;
      
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// UserNameWS 的摘要說(shuō)明
/// </summary>
[WebService(Namespace = " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù),請(qǐng)取消對(duì)下行的注釋。
[System.Web.Script.Services.ScriptService]
public class UserNameWS : System.Web.Services.WebService {

public UserNameWS () {

// 如果使用設(shè)計(jì)的組件,請(qǐng)取消注釋以下行
// InitializeComponent();
}

/// <summary>
/// 驗(yàn)證用戶(hù)是否合法
/// </summary>
/// <remarks>
/// AJAX如果要直接調(diào)用該方法,需要添加[WebMethod()],并定義為靜態(tài)方法
/// </remarks>
/// <param name="sUserName"> 用戶(hù)名 </param>
/// <returns> 返回結(jié)果 </returns>
[WebMethod]
public bool CheckUserName( string sUserName)
{
string [] userNameArrray = new string [ 5 ] { " KenLee01 " , " KenLee02 " , " KenLee03 " , " KenLee04 " , " KenLee05 " };
// 如果用戶(hù)存在,就驗(yàn)證合法
if (userNameArrray.Contains(sUserName))
{
return true ;
}

return false ;
}
}

2.修改Recipe23.aspx的腳本代碼sendData函數(shù),只需修改loc訪問(wèn)地址:

      
        //
      
      
         定義一個(gè)AJAX請(qǐng)求方法
      
      
        
function sendData(sUserName) {
// 訪問(wèn)頁(yè)面后臺(tái)方法
// var loc = window.location.href;
// 訪問(wèn)Web服務(wù)
var loc = "UserNameWS.asmx";
........

簡(jiǎn)單完成上面兩步,就可以直接調(diào)用web服務(wù)里面定義的方法了。具體顯示的效果圖,和上面介紹的AJAX訪問(wèn)頁(yè)面方法的效果圖是一樣的,這里就不用重復(fù)寫(xiě)了。

ASP.NET jQuery 食譜23 (jQuery AJAX實(shí)現(xiàn)調(diào)用頁(yè)面后臺(tái)方法和web服務(wù)定義的方法)


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系: 360901061

您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】

您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長(zhǎng)會(huì)非常 感謝您的哦!!!

發(fā)表我的評(píng)論
最新評(píng)論 總共0條評(píng)論
主站蜘蛛池模板: 精品一区二区久久久久久久网精 | 免费人成网站在线高清 | 国产成人亚洲综合无 | 亚洲综合图片小说区热久久 | 超91精品手机国产在线 | 精品一区二区三区在线观看l | 国内精品在线视频 | 五月天婷婷激情 | 亚洲在线一区二区 | 日韩亚洲欧美在线观看 | 天天综合色网 | 女性一级全黄生活片免费看 | 亚洲国产精品一区二区久 | 在线黄色免费 | 亚洲国产成人久久精品影视 | 国产精品久久久久影院色 | 欧美成人xxxxxxxx在线 | 欧美一级毛片欧美毛片视频 | 成人在线免费视频播放 | 香蕉精品视频在线观看入口 | 奇米影视奇米色777欧美 | 国产毛片毛片精品天天看 | 国产成人久久一区二区三区 | 精品在线免费观看视频 | 久久国产经典视频 | 免费国产97久久青草 | 亚洲国产免费 | 亚洲狠狠97婷婷综合久久久久 | 一级国产视频 | 久草免费新视频 | 亚洲国产精品视频在线观看 | 婷婷综合视频 | 91视频成人| 久草网视频在线观看 | 精品国产免费久久久久久婷婷 | 亚洲视频高清 | 日本高清免费毛片久久看 | 亚洲天堂久久精品成人 | 国内精品久久久久影院一蜜桃 | 纯欧美一级毛片_免费 | 欧美国产亚洲一区 |