Jquery $.ajax 调用WebService及调用ashx 及返回json
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> |
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax_Test.aspx.cs" Inherits="Ajax_Test" %>
<!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 id="Head1" runat="server">
<title>Jquery -Ajax 入门联系 Jquery.Ajax 调用后台函数，获取DataTable Json,Asp.net</title>
<script language="javascript" type="text/javascript" src="JQquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
//无参数返回值
//===============================================
$("#btn_Ajax1").click(function () {
$.ajax({
//要用post方式
type: "Post",
//方法所在页面和方法名
url: "Ajax_Test.aspx/getValueByAjaxNoParms",
//url: "Ajax_ResponseText.aspx/getValueByAjaxNoParms", //其他页面
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function (XMLHttpRequest) {
$('#show').text("正在查询");
},
success: function (data) {
//返回的数据用data.d获取内容
alert(data.d);
},
error: function (err) {
alert(err);
}
});
//禁用按钮的提交
return false;
});
//===============================================
//带参数
$("#btn_Ajax2").click(function () {
$.ajax({
type: "Post",
url: "Ajax_Test.aspx/getValueByAjaxByParms",
//方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字
data: "{'str':'我是','str2':'XXX','str3':'是不是？'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//返回的数据用data.d获取内容
alert(data.d);
},
error: function (err) {
alert(err);
}
});
//禁用按钮的提交
return false;
});
//===============================================
//返回数组
$("#btn_Ajax3").click(function () {
$.ajax({
type: "Post",
url: "Ajax_Test.aspx/getArrayByAjax",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//插入前先清空ul
$("#show").html("");
//递归获取数据
$(data.d).each(function () {
//插入结果到li里面
$("#show").append("<li>" + this + "</li>");
});
alert(data.d);
},
error: function (err) {
alert(err);
}
});
//禁用按钮的提交
return false;
});
//===============================================
//返回hashtable
$("#btn_Ajax4").click(function () {
$.ajax({
type: "Post",
url: "Ajax_Test.aspx/geHashtableByAjax",
//记得加双引号 T_T
data: "{ 'key': 'haha', 'value': '哈哈！' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//debugger;
alert("key: haha ==> " + data.d["haha"] + "\n key: www ==> " + data.d["www"]);
},
error: function (err) {
alert(err + "err");
}
});
//禁用按钮的提交
return false;
});
//===============================================
//返回DataTable（json）1
$("#btn_Ajax5").click(function () {
$.ajax({
type: "Post",
url: "Ajax_Test.aspx/geDataTableByAjax1",
data: "{'str':'我是','str2':'XXX','str3':'是不是？'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
debugger;
//你可以 alert(data.d)看数据返回的格式
data = jQuery.parseJSON(data.d); // JSON再次转换为Table 形式；
//可以是用 data[Row][Column].toString()来读取值；Row：第几行 Column：数据字段
//alert(data[0]["ID"].toString() + ";"+data[0]["Name"].toString() + ";"+data[0]["Address"].toString());
t = "<table border='1'>";
$.each(data, function (i, item) {
t += "<tr>";
t += "<td>" + item.ID + "</td>";
t += "<td>" + item.Name + "</td>";
t += "<td>" + item.Address + "</td>";
t += "</tr>";
})
t += "</table>";
$("#show").html(t);
//$('#Div1').html(BuildDetails(data));
},
error: function (err) {
alert(err + "err");
}
});
//禁用按钮的提交
return false;
});
//===============================================
//返回DataTable（json）2
$("#btn_Ajax6").click(function () {
$.ajax(
{ type: "post",
url: "Ajax_Test.aspx/geDataTableByAjax2",
//data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
debugger;
var mydts = data.d.mytablename; //这里也可以接受类似 DataSet 的对象；
$('#Div1').html(BuildDetails(mydts));
$('#Div2').html(BuildTable(mydts));
},
failure: function () {
alert("error")
}
});
});
//=================================================
});
//解析DataTable(非真正的Table)
function BuildDetails(dataTable) {
var content = [];
for (var row in dataTable) {
for (var column in dataTable[row]) {
content.push("<tr>");
content.push("<td><b>");
content.push(column);content.push("</td></b>"); content.push("<td>") ;
content.push(dataTable[row][column]);
content.push("</td>");content.push("</tr>");
}
}
var top = "<table border='1' class='dvhead'>";
var bottom = "</table>";
return top + content.join("") + bottom;
}
function BuildTable(dataTable) {
var headers = [];
var rows = [];
//column
headers.push("<tr>");
for (var column in dataTable[0])
headers.push("<td><b>" + column + "</b></td>");
headers.push("</tr>");
//row
for (var row in dataTable) {
rows.push("<tr>");
for (var column in dataTable[row]) {
rows.push("<td>");
rows.push(dataTable[row][column]);
rows.push("</td>");
}
rows.push("</tr>");
}
var top = "<table border='1' class='gvhead'>";
var bottom = "</table>"; return top + headers.join("") + rows.join("") + bottom;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input value="无参数" type="button" id="btn_Ajax1" />
<input value="带参数" type="button" id="btn_Ajax2" />
<input value="返回数组" type="button" id="btn_Ajax3" />
<input value="返回Hashtable" type="button" id="btn_Ajax4" />
<input value="返回DataTable(返回Json)" type="button" id="btn_Ajax5" />
<input value="返回DataTable(返回类似Table)" type="button" id="btn_Ajax6" />
<div id="show">
</div>
<div id="Div1">
</div>
<div id="Div2">
</div>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data; //命名空间
using System.Web.Services;//命名空间
using System.Collections;//命名空间
using System.Web.Script.Serialization;//命名空间
public partial class Ajax_Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
//[System.Web.Services.WebMethod()]
//不带参数
[WebMethod()]
public static string getValueByAjaxNoParms()
{
string ddd = "返回 GAGAHJT";
return ddd.ToString();
}
//带参数
[WebMethod]
public static string getValueByAjaxByParms(string str, string str2, string str3)
{
return str + str2 + str3;
}
//返回数组
[WebMethod]
public static List<string> getArrayByAjax()
{
List<string> li = new List<string>();
for (int i = 0; i < 10; i++)
li.Add(i + "");
return li;
}
//Hashtable
[WebMethod]
public static Hashtable geHashtableByAjax(string key, string value)
{
Hashtable hs = new Hashtable();
hs.Add("www", "yahooooooo");
hs.Add(key, value);
return hs;
}
//Json
//在前台通过jQuery.parseJSON(data.d); 转换为类似Table
[WebMethod]
public static string geDataTableByAjax1(string str, string str2, string str3)
{
DataTable dt = new DataTable();
dt.TableName = "表名";
dt.Columns.Add("ID", typeof(Int32));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Address", typeof(string));
for (int i = 0; i < 5; i++)
{
DataRow dr = dt.NewRow();
dr["ID"] = i.ToString();
dr["Name"] = "JSON" + i.ToString();
dr["Address"] = "中国-北京-海淀" + i.ToString() + "号";
dt.Rows.Add(dr);
}
string strss = Dtb2Json(dt).ToString();
return strss.ToString();
}
//json
[WebMethod]
public static Dictionary<string, object> geDataTableByAjax2()
{
DataTable dt = new DataTable();
dt.TableName = "mytablename";
dt.Columns.Add("ID", typeof(Int32));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Address", typeof(string));
for (int i = 0; i < 5; i++)
{
DataRow dr = dt.NewRow();
dr["ID"] = i.ToString();
dr["Name"] = "JSON" + i.ToString();
dr["Address"] = "中国-北京-海淀" + i.ToString() + "号";
dt.Rows.Add(dr);
}
return DatToJson(dt);
}
#region DataTable转Json
public static string Dtb2Json(DataTable dtb)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (DataRow row in dtb.Rows)
{
Dictionary<string, object> drow = new Dictionary<string, object>();
foreach (DataColumn col in dtb.Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
return jss.Serialize(dic);
}
#endregion
#region Json转DataTable
public static DataTable Json2Dtb(string json)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = jss.Deserialize<ArrayList>(json);
DataTable dtb = new DataTable();
if (dic.Count > 0)
{
foreach (Dictionary<string, object> drow in dic)
{
if (dtb.Columns.Count == 0)
{
foreach (string key in drow.Keys)
{
dtb.Columns.Add(key, drow[key].GetType());
}
}
DataRow row = dtb.NewRow();
foreach (string key in drow.Keys)
{
row[key] = drow[key];
}
dtb.Rows.Add(row);
}
}
return dtb;
}
#endregion
#region DataTable转Json(非Json)
//类似 前台jQuery.parseJSON（dt）函数
private static Dictionary<string, object> DatToJson(DataTable table)
{
Dictionary<string, object> d = new Dictionary<string, object>();
d.Add(table.TableName, RowsToDictionary(table));
return d;
}
private static List<Dictionary<string, object>> RowsToDictionary(DataTable table)
{
List<Dictionary<string, object>> objs = new List<Dictionary<string, object>>();
foreach (DataRow dr in table.Rows)
{
Dictionary<string, object> drow = new Dictionary<string, object>();
for (int i = 0; i < table.Columns.Count; i++)
{
drow.Add(table.Columns[i].ColumnName, dr[i]);
}
objs.Add(drow);
}
return objs;
}
#endregion
}
