[JQuery]- 利用jquery的ajax调用后台的WebService公共方法和网页的静态方法

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

[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, [b]data, [b]dataType, [b]success, [b]error[/b][/b][/b][/b]

另外还有一些参数，可以根据自己的需要....