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>
