JQuery调用Webservice实现AJAX实现教程_电脑教程

微软原版系统
一键重装系统
纯净系统
在线技术客服

魔法猪系统重装大师 一键在线制作启动 U 盘 PE 系统用一键重装的魔法拯救失去灵魂的系统

立即下载

JQuery调用Webservice实现AJAX实现教程: 时间：2015年04月02日 15:31:30 来源：魔法猪系统重装大师官网人气：11596

前几天跟一个朋友在聊Web的AJAX时，很惊讶他的设计方法很原始,直接用的js直接调的.aspx,传参来取得结果实现局部刷新,个人感觉这样不好维护,也没有灵活性.

怎样能够做到灵活?可维护性强?

做一个小实例出来,也加强一下印象.

jQuery+Web service来实现:Web service作后台服务,用jQuery(js优秀框架)调此web service取得结果，如下是原理图:

现在开始演示一个实例,开发工具如下为: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 description for Service1
///

    [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]//此处需要设定为ScriptService类型,js才能够从web service取得值
    public class Service1 : System.Web.Services.WebService
    {

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

        [WebMethod]
        public List GetMembers() {
            List personList = new List();
            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的错误.

3.在项目解决方案中添加一Web setup项目MyServiceSetup,如下图:

右键点击MyServiceSetup安装包,有Install(安装),unInstall(卸载)点击即可发布到IIS中或中IIS移除.

浏览已发布的这个Web service可以看到已公开的这方个方法,如图所示:

现在我们来测试一下GetMambers()这个方法,如图:

点"调用"后结果如下:

这说明发布的这个Web service已没有问题,现在我们用jQuery来调这个服务来实现AJAX局部刷新的效果。

现在下载jQuery插件jquery-1.4.1.js

下载网址:http://www.cr173.com/soft/35464.html

4. 建一个测试的项目来测试web service:TestMyService:

用js调用web service,一个按钮取得ArrayOfString中的列表数据,点击列表项调GetYourAge()方法取得某个人的相关信息(年龄),添加一html文件,把jquery-1.4.2.js把到js,

代码和jquery代码如下:

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

    Untitled Page

    <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:"",//无参数类型
            datatype:'json',
            success:function(result){
            try{
                $('#listMembers').empty();
                     $(result.d).each(function() {//遍历取得的结果
                            $("#listMembers").append("");
                        });
                }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是参数名,跟web service的方法参数一致
            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>