ajax 的运行原理大家都很清楚，这里我们可以利用jquery里面的 $.ajax() 方法对后台的 webservice公共方法和网页的后台静态方法进行调用。
关键凑是一个方法
1. 调用后台的无参数方法
1.1. 调用webservice 的公共方法
a. 首先添加一个webservice 文件 在我们的项目里，需要注意的是在WebService.asmx 后台cs文件里需要将下面这段代码取消注释，道理上面已经写的很清楚了。
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
b. 前台调用我们的第一个无参数的方法
[WebMethod]
public string HelloWorld()
{
return "Hello World of WebService1";
}
在我们的.aspx页面首先需要添加对jquery的引用，然后添加两个HTML button对事件的触发。
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<input id="BtnWebService" type="button" value="WebService" onclick="WSmethod()" />
然后凑可以很简单的用下面这个jquery提供的方法对后台webservice方法进行调用了，注意方法访问修饰必须是public
View Code
这样凑是jqery对后台webservice的公共无参数方法了。
1.2. 调用后台网页的 静态方法
a. 调用后台页面的方法首先需要添加 [System.Web.Services.WebMethod]在方法前，方法必须是静态的。下面是在网页Default.aspx的cs文件添加的静态方法。
[System.Web.Services.WebMethod]
public static string HelloWorld()
{
return "Hello World of CS1" ;
}
b. 然后凑在前天aspx页面上添加一个HTML button触发事件，同样是要引用jqery文件，一个页面引用一次凑阔仪了，这个大家都懂得。
<input id="BtnCS" type="button" value="CSfile" onclick="CSmethod()" />
c. 调用的方法和调用webservice方法一样只是url不同而已
View Code
function CSmethod() {
$.ajax({
type: "Post",
url: "Default.aspx/HelloWorld",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert(data.d);
},
error: function (err) {
alert(err);
}
});
}
两个例子在一起的效果如下：
2. 调用后台的带参数方法
2.1. 调用webservice 的公共方法
a. 同样 先添加一个带参数公共方法在我们的webservice里
[WebMethod]
public string HelloWorld2(string str)
{
return "Hello World of !" + str;
}
b. 前台页面可以继续用第一个例子里面的default 页面，只需要在调用的方法上进行小修改
View Code这里需要注意的是 data: "{'str':'WebService'}" 这里的str 必须和方法里面的参数名称一样！
2.2. 调用后台网页的 静态方法
a. 在页面上添加带参数的静态公共方法
[System.Web.Services.WebMethod]
public static string HelloWorld(string str)
{
return "Hello World of " + str;
}
b. 前台的调用和上面的webservice还是一样，注意的地方也一样
View Code
function CSmethod() {
$.ajax({
type: "Post",
url: "Default.aspx/HelloWorld",
contentType: "application/json; charset=utf-8",
dataType: "json",
data:"{'str':'CSfile2'}",
success: function (data) {
alert(data.d);
},
error: function (err) {
alert(err);
}
});
}
下面凑是带参数运行的例子：
3. 调用后台复杂参数方法
相信现在对jquery 后台的调用有些了解了，下面是我们跟后台交互的一个实际中的一个小例子，表交互。
a. 后台添加数据表的操作，返回Jason类型数据表
View Code
[WebMethod]
public string GetTable(string str)
{
DataTable dt = new DataTable();
dt.Columns.Add("id", typeof(System.Int32));
dt.Columns.Add("Name", typeof(System.String));
dt.PrimaryKey = new DataColumn[] { dt.Columns["id"] };
DataRow row;
for (int i = 0; i < 4; i++)
{
row = dt.NewRow();
row[0] = i;
row[1] = "第" + i + "个" + str;
dt.Rows.Add(row);
}
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> r;
foreach (DataRow dr in dt.Rows)
{
r = new Dictionary<string, object>();
foreach (DataColumn dc in dt.Columns)
{
r.Add(dc.ColumnName, dr[dc]);
}
rows.Add(r);
}
return serializer.Serialize(rows);
}
b. 前台先添加一个标签显示数据
<div id="result"></div>
然后稍微修改一下之前调用的$.ajax方法，将返回的数据显示在页面标签result中。
$.ajax({
type: "Post",
url: "WebServiceTest.asmx/GetTable",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{'str':'WebService3'}",
success: function (result) {
data = jQuery.parseJSON(result.d);
t = "<table>";
$.each(data, function (i, item) {
t += "<tr>";
t += "<td>" + item.id + "</td>";
t += "<td>" + item.Name + "</td>";
t += "</tr>";
})
t += "</table>";
$("#result").html(t);
},
error: function (err) {
alert(err);
}
});
最后运行的效果：
总结： 这里主要凑是 $.ajax() 返回其创建的 XMLHttpRequest 对象。
我们常用的参数也就上面例子中的几个 type, url, contentType, data, dataType, success, error
另外还有一些参数，可以根据自己的需要....