[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

　　　　这样凑是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不同而已

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 页面，只需要在调用的方法上进行小修改

这里需要注意的是  data: "{'str':'WebService'}"  这里的str 必须和方法里面的参数名称一样！

　　2.2. 调用后台网页的 静态方法　

　　　　a. 在页面上添加带参数的静态公共方法

   [System.Web.Services.WebMethod]
        public static string HelloWorld(string str)
        {
            return "Hello World of " + str;
        }

　　　　b. 前台的调用和上面的webservice还是一样，注意的地方也一样

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类型数据表

  [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

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