JAPANESE国产高清在线播放,日本免费一区二区三区最新

JQuery調(diào)用Web service實現(xiàn)AJAX實現(xiàn)教程

作者：佚名點擊：252次評論：0次標簽： JQuery

Dreamweaver jQuery智能提示插件1.2.0

類型：編程輔助大�。�109KB語言：中文評分：5.0
標簽：

立即下載

前幾天跟一個朋友在聊Web的AJAX時，很驚訝他的設(shè)計方法很原始,直接用的js直接調(diào)的.aspx,傳參來取得結(jié)果實現(xiàn)局部刷新,個人感覺這樣不好維護,也沒有靈活性.

怎樣能夠做到靈活?可維護性強?

做一個小實例出來,也加強一下印象.

jQuery+Web service來實現(xiàn):Web service作后臺服務(wù),用jQuery(js優(yōu)秀框架)調(diào)此web service取得結(jié)果，如下是原理圖:

現(xiàn)在開始演示一個實例,開發(fā)工具如下為:Visual studio S 2008+jQuery1.4.1

1.新建一項目:MyService

2.Web service后臺代碼如下:

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

namespace MyService
{
    /// <summary>
    /// Summary description for Service1
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.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]//此處需要設(shè)定為ScriptService類型,js才能夠從web service取得值
    public class Service1 : System.Web.Services.WebService
    {

        [WebMethod]
        public string GetMessage(string name)
        {
            return "Hello,"+name;
        }

        [WebMethod]
        public List<string> GetMembers() {
            List<string> personList = new List<string>();
            personList.Add("AGAN");
            personList.Add("MS");
            personList.Add("ZURI");
            personList.Add("JILI");
            personList.Add("Who are you!");
            return personList;
        }

        [WebMethod]
        public string GetYourAge(string name) {
           int age = 0;
           switch(name.ToUpper()){
               case "AGAN":
                   age = 18;
                   break;
               case "MS":
                   age = 28;
                   break;
               case "ZURI":
                   age = 25;
                   break;
               case "JILI":
                   age = 23;
                   break;
               default:
                   age = 30;
                   break;
           }
           return age.ToString();
        }
    }
}

注意在web.config中配置好默認文檔Service1.asmx,否則IIS中測試會報錯403的錯誤.

<system.webServer>
<defaultDocument>
            <files>
                <add value="Service1.asmx" />
            </files>
        </defaultDocument>
    </system.webServer>

3.在項目解決方案中添加一Web setup項目MyServiceSetup,如下圖:

右鍵點擊MyServiceSetup安裝包,有Install(安裝),unInstall(卸載)點擊即可發(fā)布到IIS中或中IIS移除.

瀏覽已發(fā)布的這個Web service可以看到已公開的這方個方法,如圖所示:

現(xiàn)在我們來測試一下GetMambers()這個方法,如圖:

點"調(diào)用"后結(jié)果如下:

這說明發(fā)布的這個Web service已沒有問題,現(xiàn)在我們用jQuery來調(diào)這個服務(wù)來實現(xiàn)AJAX局部刷新的效果。

現(xiàn)在下載jQuery插件jquery-1.4.1.js

下載網(wǎng)址:http://elephantinaurance.com/soft/35464.html

4. 建一個測試的項目來測試web service:TestMyService:

用js調(diào)用web service,一個按鈕取得ArrayOfString中的列表數(shù)據(jù),點擊列表項調(diào)GetYourAge()方法取得某個人的相關(guān)信息(年齡),添加一html文件,把jquery-1.4.2.js把到j(luò)s,

代碼和jquery代碼如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestMyService._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

    <title>Untitled Page</title>

    <script src="js/jquery-1.4.1.js" type="text/javascript"></script>


    <script type="text/javascript">

    function GetDataList()
    {
        $.ajax({
            type:"POST",
            contentType:"application/json",
            url:"http://localhost/MyServiceSetup/Service1.asmx/GetMembers",//GetMembers是web service的方法名
            data:"",//無參數(shù)類型
            datatype:'json',
            success:function(result){
            try{
                $('#listMembers').empty();
                     $(result.d).each(function() {//遍歷取得的結(jié)果
                            $("#listMembers").append("<option selected='selected' value='" + this + "'>" + this + "</option>");
                        });
                }catch(e){
                    alert(e);
                }
              },
             error: function(result, status){
                if(status=='error'){
                    alert(result);
                }
             }
        });
    }

       function GetAge(name)
        {
        $.ajax({
            type:"POST",
            contentType:"application/json",
            url:"http://localhost/MyServiceSetup/Service1.asmx/GetYourAge",//GetYourAge是web service的方法名
            data:"{name:'"+name+"'}",//name是參數(shù)名,跟web service的方法參數(shù)一致
            datatype:'json',
            success:function(result){

            try{


                $("#lblAge").html(name+","+result.d+" Year's old.");//result.d是取得的值
                }catch(e){
                    alert(e);
                }
              },
             error: function(result, status){
                if(status=='error'){
                    alert(result);
                }
             }
        });
    }
    </script>
</head>
<body>

    <form id="form1" runat="server">
    <div>
    <input id="btnGet" type="button" value="Get" onclick="return GetDataList()" />
    Members:
        <select id="listMembers" multiple="multiple" onchange="return GetAge(this.value)">
            <option></option>
        </select>
        <asp:Label ID="lblAge" runat="server" Text="Your Age?"></asp:Label>

    </div>
    </form>

</body>
</html>