Ajax在web开发中用的非常广泛,我用的最多的也就是异步调用。在这里整理一下自己所用到的一些Ajax实例,希望自己在以后的开发中可以很容易的处理类似的问题。
直接上代码了:
1.调用无参函数,前台页面可直接调用,返回String字符串
1: /// <summary>
2: /// 无参函数,前台页面可直接调用,返回String字符串
3: /// </summary>
4: /// <returns></returns>
5: [WebMethod]
6: public static string SayHello()
7: {
8: return "Hello My Ajax ......";
9: }
1: function NoParameter() {
2: $.ajax({
3: type: "Post",
4: url: "Pages/AjaxPost.aspx/SayHello",
5: contentType: "application/json; charset=utf-8",
6: dataType: "json",
7: success: function (data) {
8: alert(data.d);
9: },
10: error: function (err) {
11: alert(err);
12: }
13: });
14: }
1: 调用无参函数SayHello():<a href="#" onclick="javascript:NoParameter();">Click Me</a><br />
2.调用无参函数,前台页面可直接调用,返回String字符串
1: /// <summary>
2: /// 有参函数,也是用到比较多的,前台传入参数并调用该方法,返回一个String字符串
3: /// 用到比较多的情况是,传入参数返回bool类型的值,因为前台接受到得Data类型中没有bool
4: /// (前台接受的参数类型有:text、json、xml、html)类型,所以我们可以讲返回的bool值转换为
5: /// String类型在前台接收(eg:bool result = true; return result.ToString();)
6: /// </summary>
7: /// <param name="str1">参数1</param>
8: /// <param name="str2">参数2</param>
9: /// <returns></returns>
10: [WebMethod]
11: public static string ReturnStr(string str1, string str2)
12: {
13: return "Question:" + str1 + "\r" +
14: " Answer :" + str2;
15: }
1: function GetStr() {
2: $.ajax({
3: type: "Post",
4: url: "Pages/AjaxPost.aspx/ReturnStr",
5: data: "{'str1':'what are you doing ?','str2':'study ajax !'}",
6: contentType: "application/json; charset=utf-8",
7: dataType: "json",
8: success: function (data) {
9: alert(data.d);
10: },
11: error: function (err) {
12: alert(err);
13: }
14: });
1: 调用有参函数ReturnStr():<a href="#" onclick="javascript:GetStr();">Click Me</a><br />
3.调用有参函数,返回数组
1: /// <summary>
2: /// 有参函数,返回数组,在前台遍历就可得到数组值
3: /// 适用于返回值是多个的时候,这样就可以直接把返回值组装成数组,然后在前台访问数组
4: /// </summary>
5: /// <param name="num"></param>
6: /// <returns></returns>
7: [WebMethod]
8: public static ArrayList ReturnArray(string num)
9: {
10: ArrayList al = new ArrayList();
11: for (int i = 1; i <= Convert.ToInt32(num); i++)
12: {
13: al.Add("我是数组元素:" + i);
14: }
15:
16: return al;
17: }
1: function GetArray() {
2: var num = $("#<%=txt_Num.ClientID %>").val();
3: if (num != "") {
4: $.ajax({
5: type: "Post",
6: url: "Pages/AjaxPost.aspx/ReturnArray",
7: data: "{'num':'"+num+"'}",
8: contentType: "application/json; charset=utf-8",
9: dataType: "json",
10: success: function (data) {
11: $("#div_Value").html("");
12: $(data.d).each(function () {
13: $("#div_Value").append(this + "</br>");
14: });
15: },
16: error: function (err) {
17: alert(err);
18: }
19: });
20: } else {
21: alert("pelease enter num in textbox");
22: }
23: }
1: 调用有参函数ReturnArray():<asp:TextBox runat="server" ID="txt_Num" Width="30px" ></asp:TextBox><a href="#" onclick="javascript:GetArray();">Click Me</a><br />
4.调用有参函数,返回HashTable
1: /// <summary>
2: /// 有参函数,返回HashTable,以键值对的形式返回集合,在前台通过对应的键来访问其值
3: /// </summary>
4: /// <param name="key"></param>
5: /// <param name="value"></param>
6: /// <returns></returns>
7: [WebMethod]
8: public static Hashtable GetHashTable(string key ,string value)
9: {
10: Hashtable hs = new Hashtable();
11: hs.Add("曹操", "曹孟德");
12: hs.Add("刘备", "刘玄德");
13: hs.Add("孙权","孙仲谋");
14: hs.Add(key, value);
15:
16: return hs;
17: }
1: function GetHashTable() {
2: $.ajax({
3: type: "Post",
4: url: "Pages/AjaxPost.aspx/GetHashTable",
5: data: "{ 'key': '关羽', 'value': '关云长' }",
6: contentType: "application/json; charset=utf-8",
7: dataType: "json",
8: success: function (data) {
9: $("#div_Value").html("");
10: $("#div_Value").append( "曹操:"+data.d["曹操"]+"</br>"+
11: "刘备:"+data.d["刘备"]+"</br>"+
12: "孙权:"+data.d["孙权"]+"</br>"+
13: "关羽:"+data.d["关羽"]+"</br>");
14: },
15: error: function (err) {
16: alert(err + "err");
17: }
18: });
19: }
1: 调用有参函数GetHashTable():<a href="#" onclick="javascript:GetHashTable();">Click Me</a><br />
5.访问Xml文件
1: <?xml version="1.0" encoding="utf-8" ?>
2: <books>
3: <book>
4: <isbn>CN0001</isbn>
5: <name>水浒传</name>
6: <author>施耐庵</author>
7: <price>120.00</price>
8: </book>
9: <book>
10: <isbn>CN0002</isbn>
11: <name>三国演义</name>
12: <author>罗贯中</author>
13: <price>160.00</price>
14: </book>
15: <book>
16: <isbn>CN0003</isbn>
17: <name>西游记</name>
18: <author>吴承恩</author>
19: <price>115.00</price>
20: </book>
21: <book>
22: <isbn>CN0004</isbn>
23: <name>红楼梦</name>
24: <author>曹雪芹</author>
25: <price>280.00</price>
26: </book>
27: </books>
1: function GetXmlData() {
2: $.ajax({
3: url: "XML/MyAjaxTest.xml",
4: dataType: 'xml',
5: success: function (xml) {
6: $("#div_Value").html("");
7: $(xml).find("books>book").each(function () {
8: $("#div_Value").append("</br>");
9: $("#div_Value").append("isbn:" + $(this).find("isbn").text() + "</br>");
10: $("#div_Value").append("name:" + $(this).find("name").text() + "</br>");
11: $("#div_Value").append("author:" + $(this).find("author").text() + "</br>");
12: $("#div_Value").append("price:" + $(this).find("price").text() + "</br>");
13: })
14: },
15: error: function (result, status) {
16: alert(status);
17: }
18: });
19: }
1: Ajax访问Xml文件:<a href="#" onclick="javascript:GetXmlData();">Click Me</a><br />
以上内容源于一下blog:
http://blog.csdn.net/huangguiming/article/details/6234853
http://www.cnblogs.com/zhaoyun1016/archive/2010/06/24/1764089.html
自己在学习过程中吧代码整理了下,供参考之用。