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>