Jquery $.ajax 调用WebService及调用ashx

JQuery 版本1.5.2

ajax 在调用webservice的时候一定要注意

[System.ComponentModel.ToolboxItem(false)] 加上这句话
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService] 把这个注释去掉

WebService.asmx

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

/// <summary>
///WebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)] 
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 
[System.Web.Script.Services.ScriptService] 
public class WebService : System.Web.Services.WebService {
    
    [WebMethod]
　　　　public string HelloWorld()
　　　　{
　　　　　　return "Hello World ";
　　　　}


     [WebMethod]
    public string UserName(string name)
    {
        return "我的姓名是："+name.ToString();
    }

     [WebMethod]
     public string UserPwd(string pwd)
    {
        return "我的密码是：" + pwd.ToString();
    }
    
}

Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        if (context.Request.Form["name"] != null)
        {
            context.Response.Write(UserName(context.Request.Form["name"].ToString()));
        }
        if (context.Request.Form["pwd"] != null)
        {
            context.Response.Write(UserPwd(context.Request.Form["pwd"].ToString()));
        }
    }

    public string UserName(string name)
    {
        return name;
    }

    public string UserPwd(string pwd)
    {
        return pwd;
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

Default.aspx

这里要注意的是调用webwervice的时候 data格式必须是

data: "{ pwd: '"+$.trim($("#UserPwd").val())+"' }",

就是这地方写的不对调了好几遍。

在调用ashx我经常不这么写，写法如下。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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></title>
    <script type="text/javascript" src="js/jquery5.min.js"></script>
    <script type="text/javascript">
        function funname() {
            $.ajax({
                type: "POST",
                cache: false,
                url: "Handler.ashx/UserName",
                data: { name: $.trim($("#UserName").val()) },
                success: function (data) {
                    alert(data);
                }
            });
        }
        function funpwd() {
            $.ajax({
                type: "POST",
                cache: false,
                url: "Handler.ashx/UserPwd",
                data: { pwd: $.trim($("#UserPwd").val()) },
                success: function (data) {
                    alert(data);
                }
            });
        }

        function funnames() {
            $.ajax({
                type: "POST",
                cache: false,
                contentType: "application/json",
                url: "WebService.asmx/UserName",
                dataType: 'json',
                data: "{ name: '" + $.trim($("#UserName").val()) + "' }",
                success: function (data) {
                    alert(data.d);
                }
            });
        }
        function funpwds() {
            $.ajax({
                type: "POST",
                cache: false,
                contentType: "application/json",
                url: "WebService.asmx/UserPwd",
                dataType: 'json',
                data: "{ pwd: '"+$.trim($("#UserPwd").val())+"' }",
                success: function (data) {
                    alert(data.d);
                }
            });
        }
        $(document).ready(function () { 
            $('#btn1').click(function () {
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "WebService.asmx/UserPwd",
                    data: "{}", 
                    dataType: 'json',
                    success: function (result) {
                        alert(result.d);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="UserName" />
        <input type="text" id="UserPwd" />
        <input type="button" id="btn1" value="测试" />
        <input type="button" value="弹出姓名ashx" onclick="funname();" />
        <input type="button" value="弹出密码asxh" onclick="funpwd();" />
        <input type="button" value="弹出姓名webservice" onclick="funnames();" />
        <input type="button" value="弹出密码webservice" onclick="funpwds();" />
    </div>
    </form>
</body>
</html>

posted on 2011-04-21 11:53 freexiaoyu 阅读(890) 评论(0) 收藏举报